feat: remove highlight span tags from code tags

Author: JohannesKaufmann

commonmark.go

@@ -288,7 +288,7 @@ var commonmark = []Rule{
 	{
 		Filter: []string{"code"},
 		Replacement: func(_ string, selec *goquery.Selection, opt *Options) *string {
-			code := getHTML(selec)
+			code := getCodeContent(selec)
 
 			// Newlines in the text aren't great, since this is inline code and not a code block.
 			// Newlines will be stripped anyway in the browser, but it won't be recognized as code
@@ -324,10 +324,7 @@ var commonmark = []Rule{
 			language := codeElement.AttrOr("class", "")
 			language = strings.Replace(language, "language-", "", 1)
 
-			code := getHTML(codeElement)
-			if codeElement.Length() == 0 {
-				code = getHTML(selec)
-			}
+			code := getCodeContent(selec)
 
 			fenceChar, _ := utf8.DecodeRuneInString(opt.Fence)
 			fence := CalculateCodeFence(fenceChar, code)

testdata/TestCommonmark/pre_code/goldmark.golden

@@ -34,10 +34,72 @@ The <img> tag is used to embed an image.
 
 The <img/> tag is used to embed an image.
 
+</code></pre>
+<pre><code>
+    &lt;ul&gt;
+        &lt;li data-converter-list-prefix=&quot;- &quot;&gt;One&lt;/li&gt;
+        &lt;li data-converter-list-prefix=&quot;- &quot;&gt;Two&lt;/li&gt;
+        &lt;li data-converter-list-prefix=&quot;- &quot;&gt;Three&lt;/li&gt;
+    &lt;/ul&gt;
+
 </code></pre>
 <pre><code>
 &lt;a href=&quot;#Blabla&quot; data-index=&quot;1&quot;&gt;
     &lt;img src=&quot;http://bla.bla/img/img.svg&quot; style=&quot;height:auto&quot; width=&quot;200px&quot;/&gt;
 &lt;/a&gt;
 
 </code></pre>
+<p>We can do this like so:</p>
+<pre><code class="language-js">window.location.pathname.split(&quot;/&quot;);
+// [&quot;&quot;, &quot;blog&quot;, &quot;javascript&quot;, &quot;how-to-get-the-last-segment-of-a-url-in-javascript&quot;, &quot;&quot;]
+</code></pre>
+<hr>
+<pre><code class="language-js">function fn() {
+    x = 1;
+    return x;
+    // eslint-disable-next-line no-unreachable
+    x = 3;
+}
+</code></pre>
+<hr>
+<pre><code>&lt;p&gt;&lt;span&gt;Some text&lt;/span&gt;&lt;/p&gt;
+
+</code></pre>
+<p>Copy to Clipboard</p>
+<hr>
+<h4>HTML:</h4>
+<pre><code>&lt;p&gt;Using CSS to change the font color is easy.&lt;/p&gt;
+&lt;pre&gt;
+body {
+color: red;
+}
+&lt;/pre&gt;
+
+</code></pre>
+<p>Copy to Clipboard</p>
+<hr>
+<pre><code class="language-md">---
+title: &quot;Hello! This is the markdown file&quot;
+date: 2021-09-25
+tags: [&quot;react&quot;]
+---
+
+Content of the post goes here.
+
+![Image with alt text](./image.png)
+</code></pre>
+<hr>
+<pre><code class="language-markup">&lt;code class=&quot;language-css&quot;&gt;p { color: red }&lt;/code&gt;
+</code></pre>
+<hr>
+<p>The function <code>selectAll()</code> highlights all the text in the
+input field so the user can, for example, copy or delete the text.</p>
+<p>The <strong><code>&lt;pre&gt;</code></strong> <a href="http://example.com/en-US/docs/Web/HTML">HTML</a> element represents preformatted text.</p>
+<hr>
+<pre><code>
+This is the content:
+&lt;code&gt;_code_&lt;/code&gt;
+&lt;pre&gt;_pre_&lt;/pre&gt;
+Cool!
+
+</code></pre>

testdata/TestCommonmark/pre_code/input.html

@@ -93,9 +93,121 @@
 The <img> tag is used to embed an image.
 </code></pre>
 
+<pre><code>
+    <ul>
+        <li>One</li>
+        <li>Two</li>
+        <li>Three</li>
+    </ul>
+</code></pre>
+
+
 <!--TODO: make sure that "data-index" does not get added to the link-->
 <pre><code>
 <a href="#Blabla">
     <img src="http://bla.bla/img/img.svg" style="height:auto" width="200px"/>
 </a>
 </code></pre>
+
+
+
+
+<!--highlighting with javascript-->
+<p>We can do this like so:</p>
+<div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js">window<span class="token punctuation">.</span>location<span class="token punctuation">.</span>pathname<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">"/"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token comment">// ["", "blog", "javascript", "how-to-get-the-last-segment-of-a-url-in-javascript", ""]</span></code></pre></div>
+
+
+
+<hr />
+
+
+
+<div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    x <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
+    <span class="token keyword">return</span> x<span class="token punctuation">;</span>
+    <span class="token comment">// eslint-disable-next-line no-unreachable</span>
+    x <span class="token operator">=</span> <span class="token number">3</span><span class="token punctuation">;</span>
+<span class="token punctuation">}</span></code></pre></div>
+
+
+
+<hr />
+
+
+
+<div class="code-example"><pre class="brush: html notranslate"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>Some text<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>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>
+</code></pre><button aria-hidden="false" type="button" class="copy-icon"><span class="visually-hidden">Copy to Clipboard</span></button></div>
+
+
+
+<hr />
+
+
+
+<!--don't remove the pre tag from the middle of the code snippet-->
+<div>
+    <h4 id="html">HTML:</h4>
+
+    <div class="code-example">
+<pre class="brush: html notranslate"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>Using CSS to change the font color is easy.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>pre</span><span class="token punctuation">&gt;</span></span>
+body {
+color: red;
+}
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>pre</span><span class="token punctuation">&gt;</span></span>
+</code></pre>
+<button aria-hidden="false" type="button" class="copy-icon"><span class="visually-hidden">Copy to Clipboard</span></button>
+    </div>
+
+</div>
+
+
+
+<hr />
+
+
+
+<div class="gatsby-highlight" data-language="md"><pre class="language-md"><code class="language-md"><span class="token front-matter-block"><span class="token punctuation">---</span>
+<span class="token font-matter yaml language-yaml">title: "Hello! This is the markdown file"
+date: 2021-09-25
+tags: ["react"]</span>
+<span class="token punctuation">---</span></span>
+
+Content of the post goes here.
+
+<span class="token url"><span class="token operator">!</span>[<span class="token content">Image with alt text</span>](<span class="token url">./image.png</span>)</span></code></pre></div>
+
+
+
+<hr />
+
+
+
+<pre class="language-markup" tabindex="0"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>language-css<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>p { color: red }<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">&gt;</span></span></code></pre>
+
+
+
+<hr />
+
+
+
+<p>The function <code>selectAll()</code> highlights all the text in the
+input field so the user can, for example, copy or delete the text.</p>
+
+<p>The <strong><code>&lt;pre&gt;</code></strong> <a href="/en-US/docs/Web/HTML">HTML</a> element represents preformatted text.</p>
+
+
+
+<hr />
+
+
+
+<pre><code>
+
+This is the content:
+<code>_code_</code>
+<pre>_pre_</pre>
+Cool!
+
+</code><pre>

testdata/TestCommonmark/pre_code/output.fenced_backtick.golden

@@ -69,10 +69,101 @@ The <img/> tag is used to embed an image.
 
 ```
 
+```
+
+    <ul>
+        <li data-converter-list-prefix="- ">One</li>
+        <li data-converter-list-prefix="- ">Two</li>
+        <li data-converter-list-prefix="- ">Three</li>
+    </ul>
+
+```
+
 ```
 
 <a href="#Blabla" data-index="1">
     <img src="http://bla.bla/img/img.svg" style="height:auto" width="200px"/>
 </a>
 
+```
+
+We can do this like so:
+
+```js
+window.location.pathname.split("/");
+// ["", "blog", "javascript", "how-to-get-the-last-segment-of-a-url-in-javascript", ""]
+```
+
+* * *
+
+```js
+function fn() {
+    x = 1;
+    return x;
+    // eslint-disable-next-line no-unreachable
+    x = 3;
+}
+```
+
+* * *
+
+```
+<p><span>Some text</span></p>
+
+```
+
+Copy to Clipboard
+
+* * *
+
+#### HTML:
+
+```
+<p>Using CSS to change the font color is easy.</p>
+<pre>
+body {
+color: red;
+}
+</pre>
+
+```
+
+Copy to Clipboard
+
+* * *
+
+```md
+---
+title: "Hello! This is the markdown file"
+date: 2021-09-25
+tags: ["react"]
+---
+
+Content of the post goes here.
+
+![Image with alt text](./image.png)
+```
+
+* * *
+
+```markup
+<code class="language-css">p { color: red }</code>
+```
+
+* * *
+
+The function `selectAll()` highlights all the text in the
+input field so the user can, for example, copy or delete the text.
+
+The **`<pre>`** [HTML](http://example.com/en-US/docs/Web/HTML) element represents preformatted text.
+
+* * *
+
+```
+
+This is the content:
+<code>_code_</code>
+<pre>_pre_</pre>
+Cool!
+
 ```