Monday 19 October 2009

Installing SyntaxHighlighter 2.1 on Blogger

I just installed SyntaxHighlighter 2.1 by Alex Gorbatchev so that I could improve the readability of my code on this blog. It wasn’t the easiest thing to do and I was getting a lot of JavaScript errors.

To install it, I first downloaded the source files from here and then uploaded them to my web space hosted by Skynet. You can host them wherever you like such as Google Sites

Log into your Blogger account and click on the Layout link. Click on Edit HTML.

Look for the </head> closing tag in your HTML. Just above it add the following code

<script src='[YOURHOST]scripts/shCore.js' type='text/javascript'/>
<script src='[YOURHOST]scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='[YOURHOST]scripts/shBrushCss.js' type='text/javascript'/>
<script src='[YOURHOST]scripts/shBrushJScript.js' type='text/javascript'/>
<script src='[YOURHOST]scripts/shBrushPlain.js' type='text/javascript'/>
<script src='[YOURHOST]scripts/shBrushSql.js' type='text/javascript'/>
<script src='[YOURHOST]scripts/shBrushVb.js' type='text/javascript'/>
<script src='[YOURHOST]scripts/shBrushXml.js' type='text/javascript'/>
<link href='[YOURHOST]styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='[YOURHOST]styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
SyntaxHighlighter.config.clipboardSwf = '[YOURHOST]scripts/clipboard.swf';
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>


Replace the [YOURHOST] with the location of your installation on your hosting site. Click preview to verify that you are not getting any JavaScript errors on it.



Now this will allow you to insert syntax highlighting for your code. I removed the ones I didn’t need and you can see all the ones that are available in the scripts directory.



The main issue for me was finding that I had to add the bloggerMode property as this made the entire highlighting work.



You can also download the PreCode plugin for Windows Live Writer which allows you to insert your code formatted into Live Writer

No comments: