Getting SyntaxHighlighter working with Blogger

Yesterday I set up my first blog in order to post some documentation.  As a developer, the first thing that I wanted was to post some code with nice formatting.  The best tool for the job is SyntaxHighlighter.  I saw a lot of different posts on how to get this tool working with Blogger.com, but I couldn’t seem to get a lot of them working.  I tried different versions of the .js files hosted on Google Code and elsewhere, but no luck.  So, here’s what I did that finally worked.

1. Get a Blogger.com account.  I’ll wait for you.
2. Sign in to your Blogger account.
3. View your blog
4. In the upper right hand corner there is a menu.  Click “Customize”
   
5. You should see four tabs.  Click “Layout”
   
6. On the “Layout” tab, click “Edit HTML”
7. Scroll to the bottom of the html in the textbox, and find the tag “<!-- end outer-wrapper –>”
   
8. Paste the following code below the “<!—end outer-wrapper –>” comment, and above the “</body>” tag
   

<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shCore.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushBash.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushCpp.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushCSharp.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushCss.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushDelphi.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushDiff.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushGroovy.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushJava.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushJScript.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushPhp.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushPlain.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushPython.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushRuby.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushPerl.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushScala.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushSql.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushVb.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushXml.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushAS3.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushJavaFX.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushPowerShell.js' type='text/javascript'/> 

<script language='javascript'>
	SyntaxHighlighter.config.bloggerMode = true;
	SyntaxHighlighter.config.stripBrs = true;

	SyntaxHighlighter.all();
	dp.SyntaxHighlighter.HighlightAll('code');
</script>




9. I’ve tried Google code and other sites, but after reading the “Hosting” section of the SyntaxHighlighter Wiki, I saw that the wiki site was hosting a version of it’s own.  That was what finally made it work.

Hopefully this points someone in the right direction.