[hl_lines] Add a class to code container element

packages/zmarkdown/__tests__/__snapshots__/html-suite.test.js.snap

@@ -3,7 +3,7 @@
 exports[`Sanitize HTML to prevent XSS advanced XSS 1`] = `"<p>This is [not obvious](   lives\\\\0cript:promp('It works !')) !</p>"`;
 
 exports[`code highlight special cases discards unused attributes 1`] = `
-"<div class=\\"hljs-code-div\\"><div class=\\"hljs-line-numbers\\"><span data-count=\\"1\\"></span><span data-count=\\"2\\"></span><span data-count=\\"3\\"></span><span data-count=\\"4\\"></span><span data-count=\\"5\\"></span></div><pre><code class=\\"hljs language-python\\"><span class=\\"hljs-function\\"><span class=\\"hljs-keyword\\">def</span> <span class=\\"hljs-title\\">main</span><span class=\\"hljs-params\\">()</span>:</span>
+"<div class=\\"hljs-code-div hljs-code-python\\"><div class=\\"hljs-line-numbers\\"><span data-count=\\"1\\"></span><span data-count=\\"2\\"></span><span data-count=\\"3\\"></span><span data-count=\\"4\\"></span><span data-count=\\"5\\"></span></div><pre><code class=\\"hljs language-python\\"><span class=\\"hljs-function\\"><span class=\\"hljs-keyword\\">def</span> <span class=\\"hljs-title\\">main</span><span class=\\"hljs-params\\">()</span>:</span>
   print(<span class=\\"hljs-string\\">'It\\\\'s amazing!'</span>)
 
 <span class=\\"hljs-function\\"><span class=\\"hljs-keyword\\">def</span> <span class=\\"hljs-title\\">unused</span><span class=\\"hljs-params\\">()</span>:</span>
@@ -12,20 +12,20 @@ exports[`code highlight special cases discards unused attributes 1`] = `
 `;
 
 exports[`code highlight special cases does not highlight console 1`] = `
-"<div class=\\"hljs-code-div\\"><div class=\\"hljs-line-numbers\\"><span data-count=\\"1\\"></span></div><pre><code class=\\"language-console\\">echo \\"Hello world\\"
+"<div class=\\"hljs-code-div hljs-code-console\\"><div class=\\"hljs-line-numbers\\"><span data-count=\\"1\\"></span></div><pre><code class=\\"language-console\\">echo \\"Hello world\\"
 </code></pre></div>"
 `;
 
 exports[`code highlight special cases highlights latex 1`] = `
-"<div class=\\"hljs-code-div\\"><div class=\\"hljs-line-numbers\\"><span data-count=\\"1\\"></span><span data-count=\\"2\\"></span><span data-count=\\"3\\"></span><span data-count=\\"4\\"></span></div><pre><code class=\\"hljs language-latex\\"><span class=\\"hljs-tag\\">\\\\<span class=\\"hljs-name\\">usepackage</span><span class=\\"hljs-string\\">{inputenc}</span><span class=\\"hljs-string\\">[utf8]</span></span>
+"<div class=\\"hljs-code-div hljs-code-latex\\"><div class=\\"hljs-line-numbers\\"><span data-count=\\"1\\"></span><span data-count=\\"2\\"></span><span data-count=\\"3\\"></span><span data-count=\\"4\\"></span></div><pre><code class=\\"hljs language-latex\\"><span class=\\"hljs-tag\\">\\\\<span class=\\"hljs-name\\">usepackage</span><span class=\\"hljs-string\\">{inputenc}</span><span class=\\"hljs-string\\">[utf8]</span></span>
 <span class=\\"hljs-tag\\">\\\\<span class=\\"hljs-name\\">begin</span><span class=\\"hljs-string\\">{document}</span></span>
 <span class=\\"hljs-tag\\">\\\\<span class=\\"hljs-name\\">texttt</span><span class=\\"hljs-string\\">{code}</span></span>
 <span class=\\"hljs-tag\\">\\\\<span class=\\"hljs-name\\">end</span><span class=\\"hljs-string\\">{document}</span></span>
 </code></pre></div>"
 `;
 
 exports[`code highlight special cases supports both hl_lines and linenostart 1`] = `
-"<div class=\\"hljs-code-div\\"><div class=\\"hljs-line-numbers\\"><span data-count=\\"3\\"></span><span data-count=\\"4\\" class=\\"hll\\"></span><span data-count=\\"5\\"></span><span data-count=\\"6\\"></span><span data-count=\\"7\\"></span></div><pre><code class=\\"hljs language-python\\"><span class=\\"hljs-function\\"><span class=\\"hljs-keyword\\">def</span> <span class=\\"hljs-title\\">main</span><span class=\\"hljs-params\\">()</span>:</span>
+"<div class=\\"hljs-code-div hljs-code-python\\"><div class=\\"hljs-line-numbers\\"><span data-count=\\"3\\"></span><span data-count=\\"4\\" class=\\"hll\\"></span><span data-count=\\"5\\"></span><span data-count=\\"6\\"></span><span data-count=\\"7\\"></span></div><pre><code class=\\"hljs language-python\\"><span class=\\"hljs-function\\"><span class=\\"hljs-keyword\\">def</span> <span class=\\"hljs-title\\">main</span><span class=\\"hljs-params\\">()</span>:</span>
   print(<span class=\\"hljs-string\\">'It\\\\'s amazing!'</span>)
 
 <span class=\\"hljs-function\\"><span class=\\"hljs-keyword\\">def</span> <span class=\\"hljs-title\\">unused</span><span class=\\"hljs-params\\">()</span>:</span>
@@ -34,7 +34,7 @@ exports[`code highlight special cases supports both hl_lines and linenostart 1`]
 `;
 
 exports[`code highlight special cases supports hl_lines - comma syntax 1`] = `
-"<div class=\\"hljs-code-div\\"><div class=\\"hljs-line-numbers\\"><span data-count=\\"1\\"></span><span data-count=\\"2\\"></span><span data-count=\\"3\\"></span><span data-count=\\"4\\" class=\\"hll\\"></span><span data-count=\\"5\\" class=\\"hll\\"></span></div><pre><code class=\\"hljs language-python\\"><span class=\\"hljs-function\\"><span class=\\"hljs-keyword\\">def</span> <span class=\\"hljs-title\\">main</span><span class=\\"hljs-params\\">()</span>:</span>
+"<div class=\\"hljs-code-div hljs-code-python\\"><div class=\\"hljs-line-numbers\\"><span data-count=\\"1\\"></span><span data-count=\\"2\\"></span><span data-count=\\"3\\"></span><span data-count=\\"4\\" class=\\"hll\\"></span><span data-count=\\"5\\" class=\\"hll\\"></span></div><pre><code class=\\"hljs language-python\\"><span class=\\"hljs-function\\"><span class=\\"hljs-keyword\\">def</span> <span class=\\"hljs-title\\">main</span><span class=\\"hljs-params\\">()</span>:</span>
   print(<span class=\\"hljs-string\\">'It\\\\'s amazing!'</span>)
 
 <span class=\\"hljs-function\\"><span class=\\"hljs-keyword\\">def</span> <span class=\\"hljs-title\\">unused</span><span class=\\"hljs-params\\">()</span>:</span>
@@ -43,7 +43,7 @@ exports[`code highlight special cases supports hl_lines - comma syntax 1`] = `
 `;
 
 exports[`code highlight special cases supports hl_lines - interval syntax 1`] = `
-"<div class=\\"hljs-code-div\\"><div class=\\"hljs-line-numbers\\"><span data-count=\\"1\\" class=\\"hll\\"></span><span data-count=\\"2\\" class=\\"hll\\"></span><span data-count=\\"3\\" class=\\"hll\\"></span><span data-count=\\"4\\"></span><span data-count=\\"5\\"></span></div><pre><code class=\\"hljs language-python\\"><span class=\\"hljs-function\\"><span class=\\"hljs-keyword\\">def</span> <span class=\\"hljs-title\\">main</span><span class=\\"hljs-params\\">()</span>:</span>
+"<div class=\\"hljs-code-div hljs-code-python\\"><div class=\\"hljs-line-numbers\\"><span data-count=\\"1\\" class=\\"hll\\"></span><span data-count=\\"2\\" class=\\"hll\\"></span><span data-count=\\"3\\" class=\\"hll\\"></span><span data-count=\\"4\\"></span><span data-count=\\"5\\"></span></div><pre><code class=\\"hljs language-python\\"><span class=\\"hljs-function\\"><span class=\\"hljs-keyword\\">def</span> <span class=\\"hljs-title\\">main</span><span class=\\"hljs-params\\">()</span>:</span>
   print(<span class=\\"hljs-string\\">'It\\\\'s amazing!'</span>)
 
 <span class=\\"hljs-function\\"><span class=\\"hljs-keyword\\">def</span> <span class=\\"hljs-title\\">unused</span><span class=\\"hljs-params\\">()</span>:</span>
@@ -52,7 +52,7 @@ exports[`code highlight special cases supports hl_lines - interval syntax 1`] =
 `;
 
 exports[`code highlight special cases supports hl_lines - spaced syntax 1`] = `
-"<div class=\\"hljs-code-div\\"><div class=\\"hljs-line-numbers\\"><span data-count=\\"1\\"></span><span data-count=\\"2\\"></span><span data-count=\\"3\\"></span><span data-count=\\"4\\" class=\\"hll\\"></span><span data-count=\\"5\\" class=\\"hll\\"></span></div><pre><code class=\\"hljs language-python\\"><span class=\\"hljs-function\\"><span class=\\"hljs-keyword\\">def</span> <span class=\\"hljs-title\\">main</span><span class=\\"hljs-params\\">()</span>:</span>
+"<div class=\\"hljs-code-div hljs-code-python\\"><div class=\\"hljs-line-numbers\\"><span data-count=\\"1\\"></span><span data-count=\\"2\\"></span><span data-count=\\"3\\"></span><span data-count=\\"4\\" class=\\"hll\\"></span><span data-count=\\"5\\" class=\\"hll\\"></span></div><pre><code class=\\"hljs language-python\\"><span class=\\"hljs-function\\"><span class=\\"hljs-keyword\\">def</span> <span class=\\"hljs-title\\">main</span><span class=\\"hljs-params\\">()</span>:</span>
   print(<span class=\\"hljs-string\\">'It\\\\'s amazing!'</span>)
 
 <span class=\\"hljs-function\\"><span class=\\"hljs-keyword\\">def</span> <span class=\\"hljs-title\\">unused</span><span class=\\"hljs-params\\">()</span>:</span>
@@ -61,7 +61,7 @@ exports[`code highlight special cases supports hl_lines - spaced syntax 1`] = `
 `;
 
 exports[`code highlight special cases supports linenostart 1`] = `
-"<div class=\\"hljs-code-div\\"><div class=\\"hljs-line-numbers\\"><span data-count=\\"3\\"></span><span data-count=\\"4\\"></span><span data-count=\\"5\\"></span><span data-count=\\"6\\"></span><span data-count=\\"7\\"></span></div><pre><code class=\\"hljs language-python\\"><span class=\\"hljs-function\\"><span class=\\"hljs-keyword\\">def</span> <span class=\\"hljs-title\\">main</span><span class=\\"hljs-params\\">()</span>:</span>
+"<div class=\\"hljs-code-div hljs-code-python\\"><div class=\\"hljs-line-numbers\\"><span data-count=\\"3\\"></span><span data-count=\\"4\\"></span><span data-count=\\"5\\"></span><span data-count=\\"6\\"></span><span data-count=\\"7\\"></span></div><pre><code class=\\"hljs language-python\\"><span class=\\"hljs-function\\"><span class=\\"hljs-keyword\\">def</span> <span class=\\"hljs-title\\">main</span><span class=\\"hljs-params\\">()</span>:</span>
   print(<span class=\\"hljs-string\\">'It\\\\'s amazing!'</span>)
 
 <span class=\\"hljs-function\\"><span class=\\"hljs-keyword\\">def</span> <span class=\\"hljs-title\\">unused</span><span class=\\"hljs-params\\">()</span>:</span>

packages/zmarkdown/__tests__/__snapshots__/regressions.test.js.snap

@@ -2,9 +2,9 @@
 
 exports[`Regression tests HTML endpoint #188 It does not crash on unsupported languages fenced code blocks 1`] = `
 "<h3 id=\\"foo\\">foo<a aria-hidden=\\"true\\" href=\\"#foo\\"><span class=\\"icon icon-link\\"></span></a></h3>
-<div class=\\"hljs-code-div\\"><div class=\\"hljs-line-numbers\\"><span data-count=\\"1\\"></span></div><pre><code class=\\"hljs language-foobar\\">console.error(\\"foo\\", true)
+<div class=\\"hljs-code-div hljs-code-foobar\\"><div class=\\"hljs-line-numbers\\"><span data-count=\\"1\\"></span></div><pre><code class=\\"hljs language-foobar\\">console.error(\\"foo\\", true)
 </code></pre></div>
-<div class=\\"hljs-code-div\\"><div class=\\"hljs-line-numbers\\"><span data-count=\\"1\\"></span></div><pre><code class=\\"hljs language-js\\"><span class=\\"hljs-built_in\\">console</span>.error(<span class=\\"hljs-string\\">\\"foo\\"</span>, <span class=\\"hljs-literal\\">true</span>)
+<div class=\\"hljs-code-div hljs-code-js\\"><div class=\\"hljs-line-numbers\\"><span data-count=\\"1\\"></span></div><pre><code class=\\"hljs language-js\\"><span class=\\"hljs-built_in\\">console</span>.error(<span class=\\"hljs-string\\">\\"foo\\"</span>, <span class=\\"hljs-literal\\">true</span>)
 </code></pre></div>"
 `;
 

packages/zmarkdown/__tests__/html-suite.test.js

@@ -282,10 +282,14 @@ describe('code highlight special cases', () => {
       '```',
     ]
 
-    const result1 = (await renderString(input.join('\n'))).replace('language-latex', '')
+    const result1 = (await renderString(input.join('\n')))
+      .replace('language-latex', '')
+      .replace('hljs-code-latex', '')
 
     input[0] = '```tex'
-    const result2 = (await renderString(input.join('\n'))).replace('language-tex', '')
+    const result2 = (await renderString(input.join('\n')))
+      .replace('language-tex', '')
+      .replace('hljs-code-tex', '')
 
     expect(result2).toBe(result1)
   })

packages/zmarkdown/config/html/index.js

@@ -27,5 +27,6 @@ module.exports = {
   postProcessors: {
     iframeWrappers:   require('./iframe-wrappers'),
     footnotesReorder: true,
+    wrapCode:         true,
   },
 }

packages/zmarkdown/postprocessors/html-wrap-code.js

@@ -0,0 +1,33 @@
+/**
+ * This plugin adds a class precising the language
+ * to code blocks (.hljs-code-div).
+ */
+
+const visit = require('unist-util-visit')
+
+module.exports = () => (tree) => {
+  visit(tree, (node) => {
+    // filter super code blocks
+    if (node.type === 'element' &&
+        node.tagName === 'div' &&
+        node.properties &&
+        node.properties.className &&
+        node.properties.className.includes('hljs-code-div')
+    ) {
+      // get pre > code
+      const preElem = node.children.filter(c =>
+        c.type === 'element' && c.tagName === 'pre')
+
+      if (preElem.length === 1) {
+        const classes = preElem[0].children[0].properties.className
+        const langClass = classes.filter(c => c.startsWith('language'))
+        const language = langClass[0].substring(9)
+
+        // rewrite class name
+        if (langClass.length === 1 && language !== 'div') {
+          node.properties.className.push(`hljs-code-${language}`)
+        }
+      }
+    }
+  })
+}

packages/zmarkdown/renderers/html.js

@@ -18,6 +18,7 @@ const defaultStringifierList = {
 require('katex/dist/contrib/mhchem')
 
 const postProcessorList = {
+  wrapCode:         require('../postprocessors/html-wrap-code'),
   iframeWrappers:   require('../postprocessors/html-iframe-wrappers'),
   footnotesReorder: require('../postprocessors/html-footnotes-reorder'),
 }