Code formatting on blogger.com

If you post snippets of code or scripts on blogger.com, you may want to use something a bit more classy than setting the font to Courier New. Alex Gorbatchev has created a very nice javascript syntax highlighter.  Here are two quick examples...

Java code:

class HelloWorldApp {

    public static void main(String[] args) {
        System.out.println("Hello World!");
    }

}

BASH script:

#!/bin/bash
/usr/sbin/ntpdate 0.pool.ntp.org > /dev/null

In order to get this to work, add the following to your blogger.com template:

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeEclipse.css' rel='stylesheet' type='text/css'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>

<script language='javascript'> 
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>

Go here for a complete list of available formatting schemes, or brushes, and add them to your template as required.

Next you need to add some code to a post and tell the syntax highlighter how to format it. There are two methods for identifying code that should be formatted: 1) the <pre> method and 2) the <script> method. I prefere the <pre> method but when using this method all right angle brackets must be HTML escaped first. Read more about the configuration and methods here.

To add the above formatted java code and highlight line 4, here's what I added to the post:

<pre class="brush: java; highlight: [4]; toolbar: false">
class HelloWorldApp {

    public static void main(String[] args) {
        System.out.println("Hello World!");
    }

}
</pre>

HTH!