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
- Weeknotes: datasette-enrichments, datasette-comments, sqlite-chronicle - 8th December 2023
- Datasette Enrichments: a new plugin framework for augmenting your data - 1st December 2023
- llamafile is the new best way to run a LLM on your own computer - 29th November 2023
- Prompt injection explained, November 2023 edition - 27th November 2023
- I'm on the Newsroom Robots podcast, with thoughts on the OpenAI board - 25th November 2023
- Weeknotes: DevDay, GitHub Universe, OpenAI chaos - 22nd November 2023
- Deciphering clues in a news article to understand how it was reported - 22nd November 2023
- Exploring GPTs: ChatGPT in a trench coat? - 15th November 2023
- Financial sustainability for open source projects at GitHub Universe - 10th November 2023
- ospeak: a CLI tool for speaking text in the terminal via OpenAI - 7th November 2023