Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
NullVoxPopuli opened this issue Apr 14, 2021 · 4 comments
Closed

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

NullVoxPopuli opened this issue Apr 14, 2021 · 4 comments
Labels
bug help welcome Could use help from community parser

Comments

@NullVoxPopuli
Copy link
Contributor

NullVoxPopuli commented Apr 14, 2021 •
edited
Loading

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:

image

But, if I comment out the highlighting line:
image

there are, indeed retained.

In v10, the line breaks were retained
@NullVoxPopuli NullVoxPopuli added bug help welcome Could use help from community parser labels Apr 14, 2021
@joshgoebel
Copy link
Member

joshgoebel commented Apr 14, 2021 •
edited
Loading

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
Copy link
Contributor Author

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

@NullVoxPopuli
Copy link
Contributor Author

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
Copy link
Member

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug help welcome Could use help from community parser
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@joshgoebel @NullVoxPopuli