Syntax Highlighting on Blogger with Pygments

It seems that Blogger is not a "by coders for coders" type of service. Not at all, actually. Currently, there's no easy way to post syntax highlighted code on your blog. Although, this blog is pretty new, I have a hunch I'll be posting bits of code quite often, so I thought I should find a way to do it, and do it right. Most of the solutions on the web today imply the use of complicated javascript libraries, overloading your blog and your readers' browsers and bandwidths. The solution I have come with is simple and CSS-only, so even those that browse with Javascript deactivated will see highlighted code. I will be using Pygments, a great tool able to highlight lots of programming and markup languages, made by the guys at Pocoo. Installing Pygments on Ubuntu was a breeze: $ sudo apt-get install python-pygments The first thing we need is a stylesheet. Pygments highlights the code by creating lots of <span>s with different CSS classes. Pygments supports multiple styles, I'll be using the default one. In Blogger, we will put our code between <code class="syntax"> ... </code> tags (it's just an example, you can use what you want). Here's how to get a stylesheet: $ pygmentize -S default -f html -a "code.syntax" > syntax.css Now, by default, the <code> element is inline. We need to make it a block element and add a few styles for it. So, edit the newly created syntax.css using your favorite text editor and put this in code.syntax: code.syntax { background: #f8f8f8; /* this was here by default */ display: block; overflow: auto; padding: 3px 5px; margin: 5px 3px; border: solid 1px #afafaf; color: #000; white-space: pre; } Now, upload this file to your webhost of choice (I use Google Pages) and add this code to your Blogger template, right before the </head> tag: <link rel="stylesheet" type="text/css" href="http://example.com/syntax.css"> Time to post some highlighted code. Finally! To post syntax highlighted code, run this command: $ pygmentize -f html -O nowrap /path/to/file Copy all that is outputted and paste it in your post inside <code class="syntax"> ... </code> tags. Done! Here's an example of pygmented code: #!/usr/bin/env python import sys import traceback import utils from bin.server import LearndServer if __name__ == '__main__': learnd = LearndServer( ) try: learnd.run() except KeyboardInterrupt: utils.log("KeyboardInterrupt - Exiting.") learnd.close() except: traceback.print_exc() utils.log("Exiting.") learnd.close() A note for people using tabs (like me). You will find that Blogger auto(not-so)magically converts tabs to single spaces. That can suck, so here's a workaround: $ pygmentize -f html -O nowrap /path/to/file | expand That will expand your tabs to 8 spaces by default. To change the number of spaces, pass the -t X parameter to the expand command. For example: $ pygmentize -f html -O nowrap /path/to/file | expand -t 4 And that about wraps it up, I guess. If I get the time, maybe I'll hack together a nice PyGTK application to ease this a little bit. Play around with different pygmentize parameters and configurations, let me know if you find out some really cool trick :).