Add a syntax highlighter to your blog

If you are doing a blog about programming or some other stuff some times you need to put some code (e.g Java, PHP)in your blog post. so it would be very nice and easy to reader if that code segment is syntax highlighted.

So lets see how to add a syntax highlighter to your blog.

1. First you have to take a backup of your  blog template ( to use if something goes wrong).
2. Then click on 'Template' in the right side of the  page and click on "Edit HTML"(shown in the picture below).

3. After opening the blogger template copy the all CSS given in this link before </b:skin> tag.
4. Then you have to paste the following code before </head> tag.

   <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'></script>

<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js' type='text/javascript'></script>

<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js' type='text/javascript'></script>

<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'></script>

<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js' type='text/javascript'></script>

<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js' type='text/javascript'></script>

<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'></script>

<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js' type='text/javascript'></script>

<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js' type='text/javascript'></script>

<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js' type='text/javascript'></script>

<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js' type='text/javascript'></script>

<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js' type='text/javascript'></script>

<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'></script>

5. Then paste the following code before </body> tag.

<script language='javascript'>

dp.SyntaxHighlighter.BloggerMode();

dp.SyntaxHighlighter.HighlightAll('code');

</script>

6. Finally save the blogger template.
7. Now the syntax highlighter is ready for your page and your codes that syntax highlighting is needed should goes with in <pre></pre> tags as shown below.(code should be entered in HTML mode)

<pre name="code">
...Your html-escaped code goes here...
</pre>

<pre name="code" class="php">
    echo "I like PHP";
</pre>

This code will look like this,

...Your html-escaped code goes here...

    echo "I like PHP";

8. Here is list of supported language for <class> attribute.
9.If you want you can escape your code here 

now you can have a nice syntax highlighter for your blog