Syntax Highlighting on Blogger - A guide that actually works.

I started to look for Syntax Highlighting code today to implement on this blog. Since I code in all kind of languages (JS,C#,AS3,SQL, etc.) I need something that can handle different kind of syntax and also looks good. I found SyntaxHighlighter from Alex Gorbatchev, which looks awesome.

How do can you implement this great code in your Blogger pages? I found a few guides that did not really work that well, so I'll now explain how to do it in five easy steps.

1. Go to your Blogger blog, log in and go to Layout -> Edit HTML.


2. Open another Browser Tab and copy the CSS from this url: http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css


3. In the edit window on Blogger go to the last line of the inline CSS (located in the HEAD tag) and paste the copied CSS code.


4. Copy this JS code last in the HEAD tag:
(When posting HTML code, remember to replace < with <, and replace > with >)

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

5. At the end of the edit window just before the /BODY tag, paste this code:

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

6. Save! And we're done!