isomorphic-dompurify will sanitize the line attribute from the generated HTML.

[KUN1007]

If we input the HTML output: from the document into isomorphic-dompurify, like this:

const res = DOMPurify.sanitize(`<code class="language-js">
  <div class="code-line line-number highlight-line" line="1">
    <span class="keyword">function</span>
    <span class="function">fancyAlert</span><span class="punctuation">(</span
    ><span class="">arg</span><span class="punctuation">)</span>
    <span class="punctuation">{</span>
  </div>
  <div class="code-line line-number highlight-line" line="2">
    <span class="keyword">if</span>
    <span class="punctuation">(</span>arg<span class="punctuation">)</span>
    <span class="punctuation">{</span>
  </div>
  <div class="code-line line-number" line="3">
    $<span class="punctuation">.</span><span class="function">facebox</span
    ><span class="punctuation">(</span><span class="punctuation">{</span> div<span class="">:</span>
    <span class="string">'#foo'</span>
    <span class="punctuation">}</span><span class="punctuation">)</span>
  </div>
  <div class="code-line line-number" line="4">
    <span class="punctuation">}</span>
  </div>
  <div class="code-line line-number" line="5">
    <span class="punctuation">}</span>
  </div></code
>`)

console.log(res)

the output will be:

<code class="language-js"> <div class="code-line line-number highlight-line"> <span class="keyword">function</span> <span class="function">fancyAlert</span><span class="punctuation">(</span><span class="">arg</span><span class="punctuation">)</span> <span class="punctuation">{</span> </div> <div class="code-line line-number highlight-line"> <span class="keyword">if</span> <span class="punctuation">(</span>arg<span class="punctuation">)</span> <span class="punctuation">{</span> </div> <div class="code-line line-number"> $<span class="punctuation">.</span><span class="function">facebox</span><span class="punctuation">(</span><span class="punctuation">{</span> div<span class="">:</span> <span class="string">'#foo'</span> <span class="punctuation">}</span><span class="punctuation">)</span> </div> <div class="code-line line-number"> <span class="punctuation">}</span> </div> <div class="code-line line-number"> <span class="punctuation">}</span> </div></code>

It’s evident that the line attribute is removed by dompurify, as it is not a standard HTML attribute.

However, the removal of the line attribute means that content: attr(line); will no longer work, which will result in the line numbers not being displayed.

Perhaps we can resolve this issue by replacing the line attribute with a data-line attribute.