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 :).
