SyntaxHighlighter integration in Blogger.com

In a earlier blogpost, we've talked about using SyntaxHighlighter to make your programming code snippets more readable on your web pages. This blogpost will integrate SyntaxHighlighter into a blog hosted on blogger.com (like this blog).

Simply said, SyntaxHighligther is a set of JavaScript/CSS files you have to include on your webpage. You can host it on your private server, or you can use the scripts already online. I linked to the files in the online SVN repository of SyntaxHighlighter: http://syntaxhighlighter.googlecode.com/svn-history/trunk/.

The first step is to edit the HTML template of your blog. Starting from your dashboard, go to Design and then Edit HTML. This will present a page where you can edit the template. Scroll to the end of the code, paste the following piece of code just before the </body>-tag:

<!-- START SyntaxHighlighter -->
<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shCore.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCpp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCSharp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCss.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJava.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJScript.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPhp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPython.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushRuby.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushSql.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushVb.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushXml.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPerl.js' type='text/javascript'></script> 
<script language='javascript'> 
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
<!-- END SyntaxHighlighter -->

This piece of code will load the SyntaxHighlighter files, and update the markup of your code snippets enclosed by <pre> or <textarea>. Before it works, you have to mark them as code by supplying the following attributes to the mentioned two tags, like this:

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

I have not included every syntax file available. If you need support for other programming languages, you have to extend the JavaScript code above to include them. The available scipts can be found here: http://syntaxhighlighter.googlecode.com/svn-history/trunk/Scripts/