Code Syntax Highlighter For Blogger

As this will be primarily a software development blog I needed to find a code syntax highlighter. After some searching I decided to use Alex Gorbatchev's SyntaxHighlighter. It's been around since 2004 but has recently been re-written, and version 2.0 has just been released. There's many examples on how to use the SyntaxHighlighter with Blogger but I thought I'd update these for version 2.0.

As Blogger doesn't provide you any space to upload code, SyntaxHighlighter v2.0 now provides a hosted version. So to begin you need to edit the HTML layout of your blog. Enter the following before </head>:

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

Following that add the brushes that you think you'll need, I'm using C# and SQL:

<script src='http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushSql.js' type='text/javascript'/>

On the next line add the following:

<script type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = "http://alexgorbatchev.com/pub/sh/2.0.296/scripts/clipboard.swf"
SyntaxHighlighter.all();
</script>

The clipboard line is optional, if it's not provided the copy to clipboard icon won't display on the code window.

Finally to add a code block use the <pre></pre> tags and provide a brush name (in this case C#):

if (!working)
{
  FixIt();
  return;
}

Syntax Highlighter is donationware. If you're using it please donate to Alex.