Why Not - Code highlighting with Dojox

I recently stumbled across files in dojox for code highlighting and I thought why not? why not add a bit of syntactical sugar to blogger. So making use of AOL's very generous cross domain dojo hosting, I gave it a go.

You'll find info on the AOL CDN dojo releases here: http://dev.aol.com/dojo

From there we need to include the dojo core in our template using bloggers template html editor and add a tiny bit of script that looks something like this:

<script djConfig='parseOnLoad: true' src='http://o.aolcdn.com/dojo/1.1.0/dojo/dojo.xd.js' type='text/javascript'/>
<script>
dojo.require("dojox.highlight.languages.javascript");
dojo.addOnLoad(function(){
    dojo.query("code").forEach(dojox.highlight.init);
});
</script>

which means when the page is finished loading, grab all the "code" blocks using dojo.query and then loop over them initialising them with dojox.highlight.init.

This is pretty much lifted from the highlight test case and is worth a look if you want to see more examples.

At this point, a little tweak to the css with the block

pre code {
display: block;
border:1px dashed #aaaaaa;
overflow:auto;
background-color:#ffffff;
color:#444444;
padding:3px;
whitespace:pre;
}

..and we have code blocks that are highlighted and will handle scrollable overflow.

For some reason, IE currently doesn't obey the 'pre' aspect of all of this and hence white spacing is lost. I'll look into that when I get a chance.