feat(highlight): add languageAttr option (#278)

README.md

@@ -290,6 +290,7 @@ Option | Description | Default
 `tab`| Replace tabs |
 `autoDetect` | Detect language automatically (warning: slow)<br>_Sublanguage highlight requires `autoDetect` to be enabled and `lang` to be unset_  | false
 `mark` | Line highlight specific line(s) |
+`languageAttr` | Output code language into `data-language` attr | false
 
 ### htmlTag(tag, attrs, text, escape)
 

lib/highlight.js

@@ -14,6 +14,7 @@ function highlightUtil(str, options = {}) {
     firstLine = 1,
     caption,
     mark = [],
+    languageAttr = false,
     tab
   } = options;
   let { wrap = true } = options;
@@ -26,7 +27,7 @@ function highlightUtil(str, options = {}) {
 
   if (gutter && !wrap) wrap = true; // arbitrate conflict ("gutter:true" takes priority over "wrap:false")
 
-  const before = useHljs ? `<pre><code class="${classNames}">` : '<pre>';
+  const before = useHljs ? `<pre><code class="${classNames}"${languageAttr && lang ? ` data-language="${lang}"` : ''}>` : '<pre>';
   const after = useHljs ? '</code></pre>' : '</pre>';
 
 
@@ -50,10 +51,10 @@ function highlightUtil(str, options = {}) {
   if (!wrap) {
     // if original content has one trailing newline, replace it only once, else remove all trailing newlines
     content = /\r?\n$/.test(data.value) ? content.replace(/\n$/, '') : content.trimEnd();
-    return `<pre>${codeCaption}<code class="${classNames}">${content}</code></pre>`;
+    return `<pre>${codeCaption}<code class="${classNames}"${languageAttr && lang ? ` data-language="${lang}"` : ''}>${content}</code></pre>`;
   }
 
-  let result = `<figure class="highlight${data.language ? ` ${data.language}` : ''}">`;
+  let result = `<figure class="highlight${data.language ? ` ${data.language}` : ''}"${languageAttr && lang ? ` data-language="${lang}"` : ''}>`;
 
   result += codeCaption;
 

test/highlight.spec.js

@@ -428,4 +428,34 @@ describe('highlight', () => {
     result.should.include('class="hljs-keyword"');
     validateHtmlAsync(result, done);
   });
+
+  it('languageAttr: true', done => {
+    const str = [
+      'var string = `',
+      '  Multi',
+      '  line',
+      '  string',
+      '`'
+    ].join('\n');
+
+    const result = highlight(str, {languageAttr: true, lang: 'js'});
+    result.should.eql([
+      '<figure class="highlight js" data-language="js"><table><tr>',
+      gutter(1, 5),
+      code('<span class="keyword">var</span> string = <span class="string">`</span>\n<span class="string">  Multi</span>\n<span class="string">  line</span>\n<span class="string">  string</span>\n<span class="string">`</span>', null),
+      end
+    ].join(''));
+    validateHtmlAsync(result, done);
+  });
+
+  it('languageAttr: true (wrap: false)', done => {
+    const result = highlight(testString, {gutter: false, wrap: false, languageAttr: true});
+    console.log(result);
+    result.should.eql([
+      '<pre><code class="highlight plaintext" data-language="plaintext">',
+      entities.encode(testString),
+      '</code></pre>'
+    ].join(''));
+    validateHtmlAsync(result, done);
+  });
 });