Highlighter remove `<br>` after being applied.

[yazpower]

When I apply the highlighter in https://\*.packtpub.com/* page I get this result:

here is the html block before the highlight:

<code class="language-markup">template &lt;typename T, typename F&gt;<br>std::vector&lt;T&gt; palter(std::vector&lt;T&gt; data, F&amp;&amp; f)<br>{<br>   ptransform(std::begin(data), std::end(data),<br>              std::forward&lt;F&gt;(f));<br>   return data;<br>}</code>

after:

<code class="language-cpp hljs" style="padding: 0px; tab-size: 8;"><span class="hljs-keyword">template</span> &lt;<span class="hljs-keyword">typename</span> T, <span class="hljs-keyword">typename</span> F&gt;<span class="hljs-function">std::vector&lt;T&gt; <span class="hljs-title">palter</span><span class="hljs-params">(std::vector&lt;T&gt; data, F&amp;&amp; f)</span></span>{   <span class="hljs-built_in">ptransform</span>(std::<span class="hljs-built_in">begin</span>(data), std::<span class="hljs-built_in">end</span>(data),              std::forward&lt;F&gt;(f));   <span class="hljs-keyword">return</span> data;}</code>

The probleme come from the fact that the <code> tag containt <br>. A simple fix would be to retrieve all the element that match the markup "language" and apply a replace(/<br>/g,'\n').

A simple example to illustrate a potential fix:

const codeBlocks = document.querySelectorAll('code[class^="language"]');

codeBlocks.forEach(function (codeBlock) {
    codeBlock.innerHTML = codeBlock.innerHTML.replace(/<br>/g, '\n');
});

// Apply the css theme
...

// Apply highlight.js
hljs.highlightAll();

Would it be possible to add this feature ?

[Qeole]

Thanks for the report and suggestion!

It looks OK, as I understand all <br> tags that we want to display are turned into HTML entities and not replaced by the code. We probably need to adjust the replace pattern to match <br /> as well, though.

Would you be willing to submit a Pull Request?

[yazpower]

Here is the pull request 👍

[Qeole]

Fixed in https://github.com/Qeole/Enlight/pull/19.