Monday, September 22, 2008

Syntax Highlighting in Blogger

Recently, I've gone through and added syntax highlighting to some of my previous posts. This was done for Java, XML, and SQL. There is a great set of CSS files and JavaScript to accomplish this called SyntaxHighlighter. The downside, however, is that Blogger does not make integrating these tools very easy. I tried several times, but always managed to screw something up. As a result, I was very happy to come across a Blogger Widget for SyntaxHighlighter. All you need to do is add this widget to your blogger layout. Remember to leave the title blank so that you don't see an empty section in your sidebar. Once you've added this widget, you can add syntax highlighting similar to what you see here. To highlight Java, for example, edit the HTML of your post and surround your Java code with :

<pre name="code" class="java">

That's all there is to it. A finished example would look like this, once highlighted:

public class MyClass {

private int myInt = -1;

public int getMyInt() {
return this.myInt;

public void setMyInt(int myInt) {
this.myInt = myInt;


S R said...

I implemented SyntaxHighlighter in my blog, I'm getting text formatted with numbers, but with no color highlighting !! What ll be the probable cause ?

See my first blog, which shows the resulted code blog,

WhoAmI? said...

Re: S R

At first glance, I would imagine you didn't include the 'pre' tags to denote what language your code is in. Try adding those as I mentioned in the post, and you should have better results.

Henno Vermeulen said...

Excellent! Thank you very much, I took quite some time of searching for java-to-html solutions of which I found at least 2 methods but they all turned out very ugly. I also already found this javascript/css solution but didn't know how to include it on my page. Great thing I found your blog. I used the tool for my first Java blog at