Simon Willison’s Weblog

Syntax Highlighting with Javascript

If you were curious enough to dig around the source code of yesterday’s CSS tutorial, you may have noticed a couple of classes that didn’t appear to be doing anything:

<pre><code class="css">h1 {
  color: navy;
  border-bottom: 1px solid black;
}
</code></pre>

<pre><code class="html">...
&lt;head&gt;
&lt;style type="text/css"&gt;
h1 {
  color: blue;
}
...
&lt;/style&gt;
...
</code></pre>

I added the classes in the hope that they would be useful some time in the future. This afternoon, the Internet connection in the University library stopped working so I decided to take the time to play with an idea I’ve been tossing around for a few weeks. The result: Javascript Syntax Highlighting. The concept is pretty simple—it grabs the code samples with css or html as the class, then uses regular expressions (along with some crafty callback functions) to add <span> elements to specific bits of code to allow them to be highlighted. It works in Firebird / Mozilla but fails pitifully in IE 5, which appears not to support callbacks from the string.replace() function. I haven’t tried it in IE 6 yet.

Unfortunately, it relies on the non-standards compliant innerHTML property which causes it not to work in Mozilla in XML mode, so I can’t deploy it on my blog at the moment. Due to the way the regular expressions work I’m not entirely sure how I can rectify this using standard DOM methods, so I’m leaving it as it is for the moment.