akiran / akiran/react-highlight

innerHTML breaks syntax highlighting

Open
#85 3 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
761
Forks
82
PR merge metrics
No merged PRs in 30d

Description

I'm on nodejs 18.3, so I'm wondering if it's a compatibility thing, but here's a [codesandbox](https://codesandbox.io/s/react-highlight-forked-1ms6sr?file=/src/index.jsl) that demonstrates it.

I was able to make it to work by hacking [here](https://github.com/akiran/react-highlight/blob/master/src/index.js#L34) to do this:
```
if (innerHTML) {
var wrapped="

" +  children + "
";
props.dangerouslySetInnerHTML = { __html: wrapped };
...
```

This is because [this function](https://github.com/akiran/react-highlight/blob/master/src/index.js#L17) doesn't find the element thanks to lack of `

` 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.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.