valeriangalliat / markdown-it-highlightjs

Preset to use highlight.js with markdown-it.
The Unlicense
54 stars 30 forks source link

An em tag nested under a span tag is parsed incorrectly or unexpectedly. #19

Closed wulechuan closed 3 years ago

wulechuan commented 3 years ago

Try js codes shown below, here: https://npm.runkit.com/markdown-it-highlightjs .

const MarkdownIt = require('markdown-it')
const markdownItHighlightjs = require("markdown-it-highlightjs")

const markdownItParser = new MarkdownIt({chtml: true })
markdownItParser.use(markdownItHighlightjs)

const htmlString = markdownItParser.render('```html\n<span>A<em>B</em>C</span>\n```\n\n')
console.log('HTML string: ' + htmlString)

Expected output:

<pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>A<span class="hljs-tag">&lt;<span class="hljs-name">em</span>&gt;</span>B<span class="hljs-tag">&lt;/<span class="hljs-name">em</span>&gt;</span>C<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span></code></pre>

Actual output:

<pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>A<span class="hljs-tag">&lt;<span class="hljs-name">em</span>&gt;</span>B<span class="hljs-tag">&lt;/<span class="hljs-name">em</span>&gt;<span class="hljs-name">C</span></span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
</code></pre>

For a bit better human readability, I delibratedly insert some indetantions and blank lines to the actual output, then it looks like:

<pre>
    <code class="hljs language-html">

        <span class="hljs-tag">&lt;
            <span class="hljs-name">span</span>
            &gt;
        </span>

        A

        <span class="hljs-tag">
            &lt;
            <span class="hljs-name">em</span>
            &gt;
        </span>

        B

        <span class="hljs-tag">
            &lt;/
            <span class="hljs-name">em</span>
            &gt;

            <span class="hljs-name">C</span> <!-- ********** incorrect or unexpected ********** -->
        </span>

        <span class="hljs-tag">
            &lt;/<span class="hljs-name">span</span>
            &gt;
        </span>

    </code>
</pre>
valeriangalliat commented 3 years ago

This seems like a highlighting issue that you should report to highlight.js! Let me know if I misunderstood the issue

wulechuan commented 3 years ago

Thanks for your suggestion. I didn't think of reporting target much, so I post it here "by instinct". Sorry for bother.

wulechuan commented 3 years ago

Maybe markdown-it-highlightjs temporarily reverses to an older verision of hightlightjs?

valeriangalliat commented 3 years ago

No problem! markdown-it-highlightjs have a hljs option where you can pass your own instance of Highlight.js, so you can install a specific version of highlight.js that you know doesn't have this issue, and pass it in the hljs option :)