Export highlightCode (#352)

Author: samselikoff

addon/utils/compile-markdown.js

@@ -27,7 +27,43 @@ hljs.registerLanguage('sh', shell);
 hljs.registerLanguage('typescript', typescript);
 hljs.registerLanguage('ts', typescript);
 
-function highlightCode(code, lang) {
+/**
+  This function is used when `compileMarkdown` encounters code blocks while
+  rendering Markdown source.
+
+  You can use this function on its own if you have code snippets you want
+  to highlight at run-time, for example snippets that change based on some
+  user interaction.
+
+  ```js
+  import Component from '@ember/component';
+  import dedent from 'dedent';
+  import { highlightCode } from 'ember-cli-addon-docs/utils/compile-markdown';
+
+  export default Component.extend({
+    snippet: dedent`
+      let { foo } = bar;
+    `,
+
+    highlightedSnippet: computed(function() {
+      return highlightCode(this.snippet, 'js');
+    })
+  });
+  ```
+
+  ```hbs
+  <div class='docs-bg-code-base text-grey overflow-x-scroll'>
+    <div class="p-4 w-full">
+      <pre>{{{highlightedSnippet}}}</pre>
+    </div>
+  </div>
+  ```
+
+  @function highlightCode
+  @param {string} snippet Snippet of code
+  @param {string} lang Language to use for syntax highlighting
+*/
+export function highlightCode(code, lang) {
   return hljs.getLanguage(lang) ? hljs.highlight(lang, code).value : code
 }
 
@@ -54,7 +90,8 @@ function highlightCode(code, lang) {
   });
   ```
 
-  @function
+  @function compileMarkdown
+  @export default
   @param {string} source Markdown string representing the source content
   @param {object} options? Options. Pass `targetHandlebars: true` if turning MD into HBS
 */

tests/unit/utils/highlight-code-test.js

@@ -0,0 +1,11 @@
+import { highlightCode } from 'ember-cli-addon-docs/utils/compile-markdown';
+import { module, test } from 'qunit';
+
+module('Unit | Utility | highlight-code', function(hooks) {
+
+  // Replace this with your real tests.
+  test('it works', function(assert) {
+    let result = highlightCode(`let foo = 'bar';`, 'js');
+    assert.equal(result, `<span class="hljs-keyword">let</span> foo = <span class="hljs-string">'bar'</span>;`);
+  });
+});