v11 seems to inline code / remove line breaks with highlightElement / highlightAll

NullVoxPopuli commented 3 years ago

Describe the issue/behavior that seems buggy

Given this HTML:

<html lang="en">

<head>
  <title>Glimmer w/ Highlight.js</title>

  <meta charset="utf-8">
  <script src="https://cdn.jsdelivr.net/npm/@highlightjs/cdn-assets@11.0.0-alpha0/highlight.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@highlightjs/cdn-assets@11.0.0-alpha0/languages/javascript.min.js"></script>

  <!-- Hybrid Theme! -->
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/@highlightjs/cdn-assets@11.0.0-alpha0/styles/tomorrow-night.min.css"
    integrity="sha256-SamwRCKvsKZ8zqKto5n4ytPPKOhPbBTbJdhJJK4Fjhw="
    crossorigin="anonymous">
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/@highlightjs/cdn-assets@11.0.0-alpha0/styles/atom-one-dark-reasonable.min.css"
    integrity="sha256-4rrI7w9n2l7crFHzQhumwTmY2FsIUlDA5JlQ8bRicmc="
    crossorigin="anonymous">

  <script type="module">
    /* global hljs */
    let code = document.querySelector('pre code');

    let sample = `let code = document.querySelector('pre code');

let sample = \`
  inception

\`;

hljs.highlightElement(code);
    `;

    code.innerText = sample;

    hljs.highlightElement(code);
  </script>
  <style>
    html,
    body {
      background-color: #181c24;
      color: white;
      padding: 0;
      margin: 0;
      font-family: system-ui, arial, sans-serif;
    }

    pre {
      margin: 0;
    }

    pre code.hljs {
      padding: 1rem;
    }

    section {
      padding: 1rem;
    }
  </style>
</head>

<body>
  <h1>Repro for highlight.js</h1>
  <pre>
    <code class="language-javascript hljs">
    </code>
  </pre>
</body>

</html>

I see this output:

But, if I comment out the highlighting line:

there are, indeed retained.

In v10, the line breaks were retained

joshgoebel commented 3 years ago

code.innerText = sample;

This line is broken. innerText does NOT properly preserve line breaks. Try innerHTML or textContent or one of those other APIs.

NullVoxPopuli commented 3 years ago

but then why do line breaks exists without the highlight being applied?

NullVoxPopuli commented 3 years ago

though, I do confirm that using textContent resolves my problem. I'd still like to know why innerText behaves different and what specifically is different

joshgoebel commented 3 years ago

You also should be able to just test that setting innerText and then immediately retrieving textContent - the line breaks have already been destroyed... if you ask for innerText from an existing node it will not include proper line breaks. It's annoying, i don't remember all the details but Google is your friend if you really must know.

Closing as behaving as expecting.

highlightjs / highlight.js

v11 seems to inline code / remove line breaks with highlightElement / highlightAll #3136