feat: for compatibility, code also have language (#44)

sergioramos · Nov 13, 2020 · 3a3c448 · 3a3c448
1 parent b3a9ce4
commit 3a3c448
Show file tree

Hide file tree

Showing 29 changed files with 309 additions and 262 deletions.
diff --git a/index.js b/index.js
@@ -162,7 +162,10 @@ const parseLang = (str) => {
     .replace(/\}$/, '');
 
   const attrs = selectors.length ? selectorToAttrs(selectors) : {};
-  const className = classNames(lang ? `language-${lang}` : '', attrs.class);
+  const className = classNames(
+    lang ? `language-${lang}` : 'language-unknown',
+    attrs.class,
+  );
   const { legend = '', ...restAttrs } = attrs;
 
   return {
@@ -202,7 +205,11 @@ module.exports = (options = {}) => (tree) => {
         );
       }, '');
 
-    const code = h('code', {}, u('raw', raw));
+    const code = h(
+      'code',
+      { className: `language-${lang || 'unknown'}` },
+      u('raw', raw),
+    );
     const pre = h(
       'div',
       { className: 'remark-highlight' },

diff --git a/test/outputs/autolinker.html b/test/outputs/autolinker.html
@@ -1,6 +1,8 @@
 <link href="./theme.css" rel="stylesheet" />
 <div class="remark-highlight">
-  <pre class="language-js"><code><span class="token doc-comment comment">/**
+  <pre
+    class="language-js"
+  ><code class="language-js"><span class="token doc-comment comment">/**
  * Prism: Lightweight, robust, elegant syntax highlighting
  * MIT license http://www.opensource.org/licenses/mit-license.php/
  * <span class="token keyword">@author</span> Lea Verou http://lea.verou.me
@@ -14,7 +16,7 @@
 <div class="remark-highlight">
   <pre
     class="language-css"
-  ><code><span class="token atrule"><span class="token rule">@font-face</span></span> <span class="token punctuation">{</span>
+  ><code class="language-css"><span class="token atrule"><span class="token rule">@font-face</span></span> <span class="token punctuation">{</span>
   <span class="token property">src</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><a class="token url-link" href="http://lea.verou.me/logo.otf">http://lea.verou.me/logo.otf</a><span class="token punctuation">)</span></span><span class="token punctuation">;</span>
   <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">'LeaVerou'</span><span class="token punctuation">;</span>
 <span class="token punctuation">}</span>
@@ -23,7 +25,7 @@
 <div class="remark-highlight">
   <pre
     class="language-html"
-  ><code><span class="token comment">&lt;!-- Links in HTML, woo!
+  ><code class="language-html"><span class="token comment">&lt;!-- Links in HTML, woo!
 Lea Verou <a class="token url-link" href="http://lea.verou.me">http://lea.verou.me</a> or, with Markdown, Lea Verou --&gt;</span>
 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><a class="token url-link" href="http://prismjs.com/img/spectrum.png">http://prismjs.com/img/spectrum.png</a><span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>In attributes too!<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>Autolinking in raw text: <a class="token url-link" href="http://prismjs.com">http://prismjs.com</a><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
@@ -32,6 +34,6 @@
 <div class="remark-highlight">
   <pre
     class="language-markdown"
-  ><code><span class="token url">[<span class="token content">Text you want to see</span>](<a class="token url-link" href="http://url-goes-here.com">http://url-goes-here.com</a>)</span>
+  ><code class="language-markdown"><span class="token url">[<span class="token content">Text you want to see</span>](<a class="token url-link" href="http://url-goes-here.com">http://url-goes-here.com</a>)</span>
 </code></pre>
 </div>
diff --git a/test/outputs/autolinker.png b/test/outputs/autolinker.png
diff --git a/test/outputs/command-line.html b/test/outputs/command-line.html
@@ -5,7 +5,7 @@
     data-host="remotehost"
     data-output="2,4-8"
     class="language-bash"
-  ><code><span class="token builtin class-name">pwd</span>
+  ><code class="language-bash"><span class="token builtin class-name">pwd</span>
 /usr/home/chris/bin
 <span class="token function">ls</span> -la
 total <span class="token number">2</span>

diff --git a/test/outputs/command-line.png b/test/outputs/command-line.png
diff --git a/test/outputs/data-uri-highlight.html b/test/outputs/data-uri-highlight.html
@@ -2,7 +2,7 @@
 <div class="remark-highlight">
   <pre
     class="language-css"
-  ><code><span class="token selector">div</span> <span class="token punctuation">{</span>
+  ><code class="language-css"><span class="token selector">div</span> <span class="token punctuation">{</span>
   <span class="token property">border</span><span class="token punctuation">:</span> <span class="token number">40</span><span class="token unit">px</span> solid <span class="token color">transparent</span><span class="token punctuation">;</span>
   <span class="token property">border-image</span><span class="token punctuation">:</span> <span class="token number">33.334</span><span class="token unit">%</span>
   <span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token unit">em</span><span class="token punctuation">;</span>

diff --git a/test/outputs/data-uri-highlight.png b/test/outputs/data-uri-highlight.png
diff --git a/test/outputs/diff-highlight.html b/test/outputs/diff-highlight.html
@@ -2,7 +2,7 @@
 <div class="remark-highlight">
   <pre
     class="language-diff"
-  ><code><span class="token coord">@@ -4,6 +4,5 @@</span>
+  ><code class="language-diff"><span class="token coord">@@ -4,6 +4,5 @@</span>
 <span class="token deleted-sign deleted"><span class="token prefix deleted">-</span>  let foo = bar.baz([1, 2, 3]);
 <span class="token prefix deleted">-</span>  foo = foo + 1;
 </span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span>  const foo = bar.baz([1, 2, 3]) + 1;
@@ -12,7 +12,7 @@
 <div class="remark-highlight">
   <pre
     class="language-diff diff-highlight"
-  ><code><span class="token coord">@@ -4,6 +4,5 @@</span>
+  ><code class="language-diff"><span class="token coord">@@ -4,6 +4,5 @@</span>
 <span class="token deleted-sign deleted"><span class="token prefix deleted">-</span>  let foo = bar.baz([1, 2, 3]);
 <span class="token prefix deleted">-</span>  foo = foo + 1;
 </span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span>  const foo = bar.baz([1, 2, 3]) + 1;
@@ -22,7 +22,7 @@
 <div class="remark-highlight">
   <pre
     class="language-diff-javascript diff-highlight"
-  ><code><span class="token coord">@@ -4,6 +4,5 @@</span>
+  ><code class="language-diff-javascript"><span class="token coord">@@ -4,6 +4,5 @@</span>
 <span class="token deleted-sign deleted language-javascript"><span class="token prefix deleted">-</span>  <span class="token keyword">let</span> foo <span class="token operator">=</span> bar<span class="token punctuation">.</span><span class="token method function property-access">baz</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
 <span class="token prefix deleted">-</span>  foo <span class="token operator">=</span> foo <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">;</span>
 </span><span class="token inserted-sign inserted language-javascript"><span class="token prefix inserted">+</span>  <span class="token keyword">const</span> foo <span class="token operator">=</span> bar<span class="token punctuation">.</span><span class="token method function property-access">baz</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">;</span>

diff --git a/test/outputs/diff-highlight.png b/test/outputs/diff-highlight.png
diff --git a/test/outputs/inline-color.html b/test/outputs/inline-color.html
@@ -2,7 +2,7 @@
 <div class="remark-highlight">
   <pre
     class="language-css"
-  ><code><span class="token selector">span<span class="token class">.foo</span></span> <span class="token punctuation">{</span>
+  ><code class="language-css"><span class="token selector">span<span class="token class">.foo</span></span> <span class="token punctuation">{</span>
   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token color"><span class="inline-color-wrapper"><span class="inline-color" style="background-color:navy;"></span></span>navy</span><span class="token punctuation">;</span>
   <span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode color"><span class="inline-color-wrapper"><span class="inline-color" style="background-color:rgba(187,255,221,1);"></span></span>#bfd</span><span class="token punctuation">;</span>
 <span class="token punctuation">}</span>
@@ -17,7 +17,7 @@
 <div class="remark-highlight">
   <pre
     class="language-html"
-  ><code><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
+  ><code class="language-html"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>

diff --git a/test/outputs/inline-color.png b/test/outputs/inline-color.png
diff --git a/test/outputs/keep-markup.html b/test/outputs/keep-markup.html
@@ -2,6 +2,6 @@
 <div class="remark-highlight">
   <pre
     class="language-js"
-  ><code>x<span class="token operator">&lt;</span>span<span class="token operator">&gt;</span>a<span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">&gt;</span>y
+  ><code class="language-js">x<span class="token operator">&lt;</span>span<span class="token operator">&gt;</span>a<span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">&gt;</span>y
 </code></pre>
 </div>
diff --git a/test/outputs/keep-markup.png b/test/outputs/keep-markup.png