Highlight.js strips whitespace in pre tag

Describe the issue/behavior that seems buggy

When calling hljs.highlightElement, it strips all whitespace.

Sample Code or Instructions to Reproduce

fun `editor$transformer`() {  // called on page load
    document.querySelector<HTMLDivElement>(".md-editor")?.let { editor ->
        val input = editor.querySelector<HTMLTextAreaElement>(".md-editor-input")!!
        val code = editor.querySelector<HTMLElement>(".md-editor-code")!!

        input.addEventListener<InputEvent>("input") {
            var text = input.value
            if (text.isNotEmpty() && text.last() == '\n') {
                text += " "
            }
            println(text)
            code.innerText = text
            hljs.highlightElement(code)  // Removing this keeps whitespace as intended
            Unit
        }
    }
}

            <div class="row md-editor">
                <div class="col-7">
                    <div class="content md-editor-out">
                    </div>
                </div>
                <div class="col-5">
                    <div class="content md-editor-wrapper">
                        <textarea class="md-editor-input" spellcheck="false"></textarea>
                        <pre class="md-editor-highlight" aria-hidden="true"><code class="md-editor-code language-markdown"></code></pre>
                    </div>
                </div>
            </div>

Expected behavior Highlight.js correctly keeps spaces.

Additional context Disabling highlighting preserves spaces.

[joshgoebel]

It’s the APIs you are using. Use textContent instead of innerText.

[joshgoebel]

Closing until a test JSFiddle case can be provided. Right now this sounds like expected behavior that can be resolved by using clean text (no HTML) inside the block and using the textContent API exclusively.

If you truly need BR, consider the use of a plugin or manually replacing the <br> with real line breaks BEFORE highlighting. Ref: https://github.com/highlightjs/highlight.js/issues/2559