akiran / akiran/react-highlight

innerHTML breaks syntax highlighting

Offen
#85 3 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
Vorherrschende Sprache
JavaScript
Sterne
761
Forks
82
PR-Merge-Kennzahlen
Keine gemergten PRs in 30 T.

Beschreibung

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.

Beitragsleitfaden

Für dieses Repository ist kein Beitragsleitfaden indexiert

Bewertung

Dieses Issue wurde noch nicht bewertet.

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.