Newlines are lost during formatting

Describe the issue/behavior that seems buggy Preformatted code is lost after highlighting a block in 11.1. It seems that in version 10 br elements were inserted, and now they aren’t. Although I don’t know why that should matter in a pre block.

Sample Code or Instructions to Reproduce

I have a little library that uses highlight to embed source using web components. https://kag0.github.io/sauce/ You can see on the documentation page, it’s embedding snippets from an example html file in the repo https://kag0.github.io/sauce/example.html but they’re missing the line breaks.

To prove that they would normally have line breaks:

1. clone the repo
2. open example.html and change the script embed from https://kag0.github.io/sauce/sauce.js to the local sauce.js
3. open sauce.js and comment out line 43 .then(_ => hljs.highlightBlock(code))
4. open example.html in the browser, observe that line breaks and indentation are correct
5. uncomment the line and observe that code is highlighted, but line breaks are gone

Expected behavior line breaks should be preserved

Additional context rel https://github.com/highlightjs/highlight.js/issues/2131 https://github.com/highlightjs/highlight.js/issues/3242

[joshgoebel]

You may also want to look at textContent vs innerText… there are very different line handling behavior with the various APIs.

[yn-academia]

Just walked right into this one. I guess the existence of this issue is documentation in itself.

Regarding FAQ: I don’t know how often a question needs to arise in order to make it into FAQ, but it seems that multiple people have encountered this, or something related, in https://github.com/highlightjs/highlight.js/issues/1664

I agree that how to use the DOM API is outside the scope of using HLJS and its documentation.

However, people will continue opening Github issues for this in HLJS, because it’s not obvious right away that it’s DOM misuse. Having in the FAQ “before you create a github issue about missing highlights due to comments, or broken line breaks, or whitespace issues, or anything else, make sure you know the difference between innerText and textContent, and are using the latter” - that would at least prevent people from opening new Github issues for this project.