The Fastest Javascript Syntax Highlighter

You highlight it before sending it. Sorry for the click-bait, but it is that simple.

This is a simple one-page app. It's slow, but that dosn't matter. Paste some javascript code below, get the result that is copypastable into HTML.




  

  

  

  
This can go into your page:

Just include the CSS styling options:


  

.codeStr{color:green}

.codeThings{color:navy}

.codeKeyword{color:blue}

.codeWindowKeyword{color:teal}

.codeNumber{color:red}

.codeComment{color:gray}



  

You might like to stick the generated code in pre and code blocks. Like




<pre>

<code>

code here

</code>

</pre>



and style the code block with


  

pre {	

border-left:1px solid black;

padding-left:1em;

margin-left:1em;

}



  

But that's all up to you.

Motivation

Why include code to calculate the highlighting at run time? This seems to be the common practice, with things like Prism and highlightjs.org. This is load heavy and slow for the user, requiring the users runtime, probably to load a library (that might not be in-lined) and then after the page has loaded, do some replacement on the DOM. When the output of running highlighters is the same each time, then why not just pre-process it. Do it once as you write the page, then just give the user an already highlighted chunk of HTML for an incredibly fast user experience.

I am now aware of hilite.me that is doing much the same thing.