React-markdown: Highlighting - how?

[garrilla]

in the example page you show code highlighting

I also noticed that highlight is an option

but it's not clear how to do this. Any advice?

[rexxars]

Good question. I think the intention was that you would pass a React component here that would handle the rendering of the source. However, I see that I never got around to actually implementing it.

In the demo, I'm using highlight.js with a fairly ugly componentDidUpdate() +

var els = document.querySelectorAll('pre code');
for (var i = 0; i < els.length; i++) {
    if (!els[i].classList.contains('hljs')) {
        window.hljs.highlightBlock(els[i]);
    }
}

... this is obviously far from ideal. I'll keep this issue open and see if I can find the time at some point to implement this as it was intended (up for grabs if anyone else wants to address it, obviously).

[garrilla]

Thanks for quick response...

I couldn't work it out from your demo as it had been minified...

[rexxars]

Ah, sorry. The demo/src folder holds the unminified code, if you want to take a look.

[rexxars]

With version 4, this is now much easier, the demo is updated with an example:

https://github.com/rexxars/react-markdown/blob/master/demo/src/demo.js#L61-L69
https://github.com/rexxars/react-markdown/blob/master/demo/src/code-block.js

There are better libraries for doing this than highlight.js, I'll see if I can update the demo to use that at some time later.