Using highlight.js for code blocks as posts load

drew

I've been working on a branch for Redactor to parse different blocks in different ways.
It makes a button and you can pick a style, and it puts it in.
https://github.com/NodeBB/nodebb-plugin-composer-redactor/tree/codeblocks
Initially I just had it wrap code in <pre><code></code></pre> but then I tried to introduce highlight.js for good WYSIWYG.
Unfortunately redactor has some stuff going in the background that just munges it each time.

You can see what I am doing here:
https://github.com/NodeBB/nodebb-plugin-composer-redactor/compare/codeblocks
I think the smarter way is if I introduce post parsing as they load in instead of trying to do it in the composer box on the fly.

Is it possible for me to hook into each post and run code against it?
Essentially I'd have the post saved in the db with the plain <pre> tag, but when it loaded into the DOM I'd either (serverside or clientside, whichever) parse the post and run any <pre> blocks through highlight.js to get them looking right.

Is that possible? Anybody able to point me in the right direction?

Thanks

<baris>

I believe markdown plugin already does something like this take a look here

nodebb-plugin-markdown/public/js/client.js at master · NodeBB/nodebb-plugin-markdown

A Markdown parser for NodeBB. Contribute to NodeBB/nodebb-plugin-markdown development by creating an account on GitHub.

GitHub (github.com)

drew

@baris thanks. I realised there's some issues with redactor munging the data.
When code is insered inside a <pre/> block, switching between HTML and WYSIWYG views will munge the content to HTML entitites.
You can recreate this issue on this page:
http://imperavi.com/redactor/examples/typography/

Switch to code view and add some HTML inside the <pre/> block. I entered:
<p>test</p>
Switch to WYSIWYG and back to code and it has been replaced by:

&lt;p&gt;test&lt;/p&gt;

This breaks the ability to parse that code later with syntax highlighters.

I've raised it with Imperavi.