@@ -27,7 +27,43 @@ hljs.registerLanguage('sh', shell);
27
27
hljs . registerLanguage ( 'typescript' , typescript ) ;
28
28
hljs . registerLanguage ( 'ts' , typescript ) ;
29
29
30
- function highlightCode ( code , lang ) {
30
+ /**
31
+ This function is used when `compileMarkdown` encounters code blocks while
32
+ rendering Markdown source.
33
+
34
+ You can use this function on its own if you have code snippets you want
35
+ to highlight at run-time, for example snippets that change based on some
36
+ user interaction.
37
+
38
+ ```js
39
+ import Component from '@ember/component';
40
+ import dedent from 'dedent';
41
+ import { highlightCode } from 'ember-cli-addon-docs/utils/compile-markdown';
42
+
43
+ export default Component.extend({
44
+ snippet: dedent`
45
+ let { foo } = bar;
46
+ `,
47
+
48
+ highlightedSnippet: computed(function() {
49
+ return highlightCode(this.snippet, 'js');
50
+ })
51
+ });
52
+ ```
53
+
54
+ ```hbs
55
+ <div class='docs-bg-code-base text-grey overflow-x-scroll'>
56
+ <div class="p-4 w-full">
57
+ <pre>{{{highlightedSnippet}}}</pre>
58
+ </div>
59
+ </div>
60
+ ```
61
+
62
+ @function highlightCode
63
+ @param {string } snippet Snippet of code
64
+ @param {string } lang Language to use for syntax highlighting
65
+ */
66
+ export function highlightCode ( code , lang ) {
31
67
return hljs . getLanguage ( lang ) ? hljs . highlight ( lang , code ) . value : code
32
68
}
33
69
@@ -54,7 +90,8 @@ function highlightCode(code, lang) {
54
90
});
55
91
```
56
92
57
- @function
93
+ @function compileMarkdown
94
+ @export default
58
95
@param {string } source Markdown string representing the source content
59
96
@param {object } options? Options. Pass `targetHandlebars: true` if turning MD into HBS
60
97
*/
0 commit comments