Formatting source code on Blogger with SyntaxHighlighter

In my last post, I shared a few lines of Linux terminal commands. Apart from the <pre> HTML tag, which uses a monospaced font and preserves white space, Blogger doesn't provide an easy way to publish this type of data. In a post with a couple of lines of code, this is a minor inconvenience. However, I hope to be able to share longer code snippets at some point in the future, and without some form of syntax highlighting this would quickly become difficult to read.

Enter SyntaxHighlighter, a Javascript code syntax highlighter written and maintained by Alex Gorbatchev. It's completely self-contained, and a hosted copy is provided for use with services like Blogger that don't have the facility to store uploaded files.

Due to the way Blogger handles HTML code, SyntaxHighlighter will only work with Simple (i.e. non-dynamic) templates. This isn't a problem for me, since I prefer the Simple templates anyway. Installation is as simple as opening the template's HTML, finding the </head> tag and adding the following code directly before it:

<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/shThemeEmacs.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/shBrushAS3.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushColdFusion.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDelphi.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushErlang.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.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/shBrushJavaFX.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPowerShell.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
  
<script language='javascript' type='text/javascript'>
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all();
</script>

This code loads the stylesheets associated with SyntaxHighlighter, and also the script itself. I'm using the hosted copy, but obviously if you were using a copy on your own server you would need to change the paths accordingly.

Each language (or group of languages) has it's own Javascript file. The code above includes all the currently available files, but once I'd checked the code worked I commented out lines that referred to languages that I'm unlikely to use in the near future. This should reduce page loading times, and also reduce the strain on the hosting server a little (Gorbatchev reports that requests for the hosted files alone use some 83Gb of bandwidth per month so every little helps). There are also a choice of themes, which can be changed by modifying the CSS import:

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeEmacs.css' rel='stylesheet' type='text/css'/>

Once SyntaxHighlighter is installed, adding code to a post requires switching to the HTML view and adding the following code:

<pre "class=brush:language">
CODE
</pre>

Where "language" is one of the supported languages listed here. This is no more fiddly than surrounding the code with normal <pre> tags, and when viewed on a browser that doesn't support JavaScript it should fail gracefully and simply display the code using a monospaced font. The only slight quirk is that right angled brackets (<) need to be escaped with the HTML code &lt;.

All the code snippets I've provided in this post make use of SyntaxHighlighter, and I hope it will make code snippets that I provide in future posts easier to read and understand.