innerHTML breaks syntax highlighting

[maikhorma]

I'm on nodejs 18.3, so I'm wondering if it's a compatibility thing, but here's a codesandbox that demonstrates it.

I was able to make it to work by hacking here to do this:

            if (innerHTML) {
                var wrapped="<pre><code>" +  children + "</code></pre>";
                props.dangerouslySetInnerHTML = { __html: wrapped };
                ...

This is because this function doesn't find the element thanks to lack of <pre><code> wrapper:

    highlightCode() {
        const nodes = this.el.querySelectorAll('pre code');

        for (let i = 0; i < nodes.length; i++) {
            hljs.highlightBlock(nodes[i])
        }
    }

I'd do a PR myself but i'm a novice at this js and react stuff and i'm pretty sure my hack isn't the right way to fix it. If you want to explain what I need to do I can submit the PR.

[code-jorge]

Hi @maikhorma - I think you are using this incorrectly.

The innerHTML property is only meant to be used if your HTML comes from an outside source that already generates it in a compliant matter with the highlight.js library.

This is clearly not the case from your code sandbox sample.

This could be the case if your use case is more complex, and the code you want to highlight comes directly from a markdown compiler (as the author mentions) - which produces HTML, where the markdown code is wrapped in the <pre><code> tags. That way those parts get highlighted, but the rest of the content does not.

Going back to your sample, either remove the innerHTML attribute (you don't really need it for the example you've presented)

Or change the inner content to this:

const App = () => (
  <div>
    <Highlight language="javascript" innerHTML>
    {`<pre><code>
        function foo() { return '<a href='www.google.com'>hi</a>' }
      </code></pre>`}
    </Highlight>
  </div>
);

That way you don't need to do any hacking!

Hope this helps! :)

[maikhorma]

Thanks for the response and that makes sense that I can just wrap the outside source instead of hacking (the codesandbox was just a simplified example), but what's the point of the Highlight plugin if it doesn't highlight anything unless you wrap it in a <pre><code> that the documentation doesn't explain. Why don't we need to wrap our content with <pre><code> if innerHTML isn't specified?

[maikhorma]

Also, maybe i'm misunderstanding something:

Going back to your sample, either remove the innerHTML attribute (you don't really need it for the example you've presented)

Removing the innerHTML tag doesn't produce the desired behavior, it styles the html and doesn't present as an actual hyperlink. Is there a way to get the hyperlink to work without using innerHTML?