Is there a way to proper hightlight HTML code (including CSS and JS) ??

[Neohiro79]

Here is the Fiddle in question:

http://jsfiddle.net/neohiro79/zbfdhxjy/8/

Or am I missing some important script or setting?

[joshgoebel]

First none of that will work until your properly escape your HTML. Otherwise it’s just HTML not code to be highlighted. There’s nothing magic about putting HTML inside pre or code. It still needs to be escaped.

https://www.freeformatter.com/html-escape.html

If you do that and then use the XML language to highlight the code block it should color script with JavaScript and CSS with CSS automatically.

[Neohiro79]

Thanks for the quick reply.

So in consequence I'll better stick with Rainbow.js who finally WORKS as expected from startup:

https://jsfiddle.net/neohiro79/zbfdhxjy/9/

[joshgoebel]

That is a VERY bad idea and easy to shoot yourself in the foot (even if you control the code 100%). And if you don't 100% control the code you've just opened up your site to all sorts of evil exploits.

https://jsfiddle.net/ajoshguy/dx73h1rc/

Here I am injecting JS into your page because you aren't doing proper escaping. All that Javascript code is being parsed and executed! That's bad.

[joshgoebel]

I filed an issue: ccampbell/rainbow#249

[joshgoebel]

A properly escape snippet works. The comment will be highligted as an HTML comment.

<pre><code class="lang-xml">
&lt;!-- this is a html comment --&gt;
</code>
</pre>

And just to show it works (HTML, CSS, JS all highlighted) when you escape the code properly:

https://jsfiddle.net/ajoshguy/2pyhud8z/

Closing as asked and answered. :-) I'd really recommend you read up on JS and HTML injection attacks.

[joshgoebel]

@Neohiro79 Once we get to v11 and dump the "you can include HTML" feature (requiring a plugin-in) I'll probably make changes to show an error message with a link to "educate" people when they try and include raw HTML like you were doing... so instead of just not working it'll send someone off to read and learn about WHY they need to properly escape their code.

Sadly we can't do this now since we allow HTML (for "clever uses") and it's impossible to know the users intention. Were they including HTML on accident or on purpose... changing how this works would be a breaking change so something we'll have to push off until v11.

[Neohiro79]

I think, that's a good idea, since it will give me at least a hint what potentially went wrong ... ;-)