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.
just a little thing.
ReplyDeletecode 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
Thanks Ken, added.
ReplyDelete<blush> for not doing it earlier :)