How to add Syntax Highlight (syntaxhighlighter) to Blogger

Sometimes, we would like to post some code snippets in our blogger blogs.

SyntaxHighlighter (an open-source js library available @ Google Code) can highlight the keywords in your code and provide a better visual appearance to your posted code.

Here is how you can integrate the SyntaxHighlighter in your Blogger blog:

1. Go to SyntaxHighlighter page @ Google Code :
http://code.google.com/p/syntaxhighlighter

2. Download their latest version and extract it.

3. It is sufficient, if you host only the css file (SyntaxHighlighter.css) in your hosting server

(if you don't have one, Google Site will be helpful to you)

4. All required Javascript files can be accessed from the Google Code site itself.

5. Now, go to your Blogger Template > Edit HTML

6. In the Template, add the below code, after the end of the footer div.

<link href="http://[HOSTING_SERVER]/SyntaxHighlighter.css" rel="stylesheet" type="text/css">

<script language="javascript" src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js"></script>

<script language="javascript" src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js"></script>
<script language="javascript" src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js"></script>
<script language="javascript" src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js"></script>

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

Configure the Hosting Server correctly (line1). Instead you can also use the css in my page with the below code:

<link href="http://sites.google.com/site/pratheesr/SyntaxHighlighter.css" rel="stylesheet" type="text/css">

I have included only the javascript files for Java, Cpp and XML in this code snippet. You will have to add the appropriate javascript file for each programming language.

You can find the complete list of supported languages and their javascript file links @ http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts

7. After saving the template, you can post your codes in the posts within a pre tag and appropriate class name, as follows:

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