Friday, March 19, 2010

Blogger Code Highlighting

I wanted to add code highlighting to the blog to make things easier to read.
After a bit of searching on easy ways to implement code highlighting on Blogger I found a few sites like Sandro's that used Google's code prettify.

I added the following lines to the head section of the blogger template.

<link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js">  </script>


Then I change body tag in your template to include onload="prettyPrint()":
>
...
<body onload='prettyPrint()'>
...

Now all you have to do when you want highlighted piece of code in your blog is to use.


<pre class="prettyprint">
... # Your code goes here
</pre>

There is another style which includes line numbers that I may try in the near future.
An example can be found here.