Syntax Highlighting with Javascript
19th May 2003
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">...
<head>
<style type="text/css">
h1 {
color: blue;
}
...
</style>
...
</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.
More recent articles
- OpenAI DevDay: Let’s build developer tools, not digital God - 2nd October 2024
- OpenAI DevDay 2024 live blog - 1st October 2024
- Weeknotes: Three podcasts, two trips and a new plugin system - 30th September 2024