Friday, September 26, 2008

A small twist on using syntaxhighlighter

Ronnie wanted to add syntax highlighting to his Blogger blog. I just did it with syntaxhighlighter and there are quite a few guides on how to do it (thanks to them all - they helped a lot).

But there's a twist on how I do it. I wanted to use some good client-side performance rules and to enable all supported languages, so I did the following:

I. Minimize HTTP requests by combining all JS files into one, with 'shCore.js' first (the others depend on it)

cat shCore.js shBrushCSharp.js shBrushCpp.js ... > syntaxhighlighter-1.5.1-all.js

II. Minify the JS and CSS with the YUI Compressor (to compare JS minifiers check out Arthur Blake's CompressorRater, and also check out Art of Scaling's CSS Minifier)

java -jar yuicompressor-2.3.6.jar syntaxhighlighter-1.5.1-all.js --type js -o syntaxhighlighter-1.5.1-all.min.js
java -jar yuicompressor-2.3.6.jar SyntaxHighlighter.css --type css -o SyntaxHighlighter-1.5.1.min.css

I'm currently hosting the files at the Google Page Creator, but that means I don't implement 2 more important steps: adding a far-future "Expires" header and gzipping. If anyone knows of a free (or very cheap) host that offers this I'd be grateful to know.


  1. just a little thing.

    code sections in the blog, when being longer than the paragraph's width, are simply cut off.

    try to add overflow-x:scroll to the pre elements

  2. Thanks Ken, added.
    <blush> for not doing it earlier :)