The Joy of Blogger Syntax Highlighting

On a whim I decided to setup a blog where I could capture the odd technical thought, primarily to replace my trusty notebook (the paper kind) which turns out to be a bit prone to getting lost, coffee coated, and so on.

On encountering some problems with Spring and thread safety I decided to scratch a few notes about it. The post included a little bit of Java and XML so I thought it would be nice to have it highlighted neatly. Ninety minutes later I had tried several variants of setting up SyntaxHighlighter on blogger without using any of my own hosting. Most of these methods did not work or only partially worked. Ironically most of the methods I tried were posted on other peoples blogs. The closest one to working out of the box was this one. The result was the text formatted but none of the styles applied properly.

On inspection of a blog where the highlighter seemed to be working (http://alisteroz.blogspot.com/) it appeared that the styles were simply copied inline. So, the steps that ultimately worked for me are:

1. Open the blogger Layout tab and click 'Edit HTML'
2. Locate <head/> and add the core syntax highlighting script, plus the script(s) specific to any types of code you wish to post. In my case:
   

   <script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js'></script>
   <script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js'></script>
   <script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js'></script>
   <script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js'></script>
   <script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js'></script>
   <script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js'></script>
   <script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js'></script>
   

3. Open http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css and copy/paste the entire content into the layout just before the --></style>. This will typically be just above the spot where the .js file <script> tags were added
4. Locate the </body> tag and add the following just before it
   

   <script language="javascript">
   dp.SyntaxHighlighter.BloggerMode();
   dp.SyntaxHighlighter.HighlightAll('code');
   </script>
   

5. Place code, html escaped (many online tools, such as http://accessify.com/tools-and-wizards/developer-tools/quick-escape/default.php will do this for you) into pre blocks
   

   <pre class="Xml" name="code">
   &lt;script language='javascript'
   </pre>
   

All in all much less easy than I had expected!! Note that you must have the brush (shBrushlanguage.js) script imported from http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/ to get highlighting for the corresponding language.