Friday, January 18, 2008

Code Syntax-Highlighting on Blogger

Any self-respecting coder will not blog about programming without proper code syntax-highlighting. If you use Blogger, I'll save you the trouble of googling... Good results here and here.

As mentioned in the above blog links, I too am using TextMate on OS X which has a nifty built-in 'export to HTML' which, when combined with TextMate's themed CSS, gives very nice looking code blocks. You simply select the code you want highlighted, export it from TextMate, and paste into the HTML editor in Blogger.

I saved the TextMate CSS into my blogger template, so now any <pre> tag will produce a pretty code block, and any pasted HTML code from TextMate will be blocked and colorized.

UPDATE:
Yet another (perhaps better) approach which also works quite well is a JavaScript project cleverly named syntaxhighlighter. I stumbled across this code when viewing RubyTips.org which uses this library. The feature that I really liked is that it puts some nifty links at the top of each code block that allow copy to clipboard, and options to view the code in a separate window. The only downside is that because it is implemented with RegEx's in JavaScript, for large blocks of code, it will likely slow things down too much to be useful. But for short blocks of code, it is really a nice solution! Next time I post some code to this blog, I think I will give it a try!

No comments: