A small JavaScript program that can be included into HTML pages to support client-side syntax highlighting of source code. The script is based on Jasper Bedaux's C++2HTML with the difference that it doesn't create a new HTML page for the highligted code, but replaces the sourcecode that is included in a HTML page inline with a highlighted version of itself. Following a short on how to use the script:

First of all you have to import this script into your html-page. This can be achieved for example with a line like this:

<script language="Javascript1.5" type="text/javascript" src="highlight.js">
</script>

This script requires JavaScript 1.5 or higher. The language attribute takes care that the script will only be loaded if the browser supports at least JavaScript 1.5.

Place source code that should be highlighted inside a <pre> element that is itself directly nested inside a <div> element with a class attribute that contains the value 'listing' like this:

<div class="listing cpp"><pre class="listing">
class cmpImovINode : public MachNode { 
private:
  MachOper *_opnd_array[6];
public:
...
</pre></div>

The highlight() function from this file will replace the <div> element with a new <div> element that contains the highlighted source code. The language of the source code can be specified as a second value of the class attribute. Currently "cpp" for C++ and "java" are supported ("cpp" is the default, if no language is explicitely choosen). Below you can see the highlighted output of the above source code:

class cmpImovINode : public MachNode { 
private:
  MachOper *_opnd_array[6];
public:
...

Notice that the highlight() function will copy and paste the <pre> tag as it is from your document to the generated, highlighted code. So in the example above, you could generate a certain kind of highlighting even if this script shouldn't work (see notice below) if you define the following style somwhere in the head section of your document:

<style type="text/css" id="internalStyle">
  pre.listing {
    display: table-cell;
    color: black;
    background-color: #F0F0FF;
    border-style: solid;
    border-width: 1px;
    border-color: #0000C0;
    margin: 0px;
    padding: 2px;
    width: auto; 
    overflow: auto;  
    font-family: monospace;
  }
</style>

Also notice that your file will also look reasonable if a browser doesn't support JavaScript. In such a case, the source code will be presented "as is" inside its <pre> element (the outer <div> element should cause no harm).

This script has been tested to work with the following browsers:
Mozilla 1.7.12 (Linux), Firefox 1.0.7 (Linux), Konqueror 3.4.2 (Linux), Opera 9.20 (Linux) and Explorer 6 and 7 (Windows XP). You can download it here:

highlight.js

Hints:

• Also not strictly HTML conform most browsers (at least the ones listed above) support the isertion of a <style> tag in the document body. That way, this script can be used to highlight source code in blogs where you can only use HTML as input.
• In fact all the HTML special characters ('&', '<' and '>') in the sourcecode must be escaped. Most browsers usually won't complain about them and handle them over to the highlight() method which does the escaping. If you want to be on the safe side, I recommend that you additionly include the source code in CDATA sections and preprocess the file with an XSLT processor.
• There's a similar script available from Ivan Sagalaev that supports more languages.