Syntax Highlighter in Blogger Post Codes

Seen Syntax highlighters in Wordpress before? Yeah the same ones which are used to display code snippets on your Wordpress blog. Well If you are a Blogspot user and disappointed then hey we can do it too. Thanks to Googlecode this stylish syntax highlighting can be done on blogger blogs too and its much better than the previous method of displaying source codes in your blog.

Login into your Blogger Dashboard >Edit HTML
As I always say before attempting any tutorial or hack its wise to make a backup of your blogger template. So please download your blogger template.
Locate </b:skin> in your blogger template.
Then copy all the CSS content from this file and paste it right before </b:skin>

Now locate </head> in your blogger template and paste the following code before </head> tag

<!-- Add-in CSS for syntax highlighting -->
<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>

Note: You can now choose to remove any language you dont prefer to use, like Delphi or Ruby or any other which you are not going to use in your blog.

Now Search for </body> in your blogger template EDIT HTML mode, Before the </body> tag, insert the following

<!-- Add-in Script for syntax highlighting -->
<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>

Use the "Preview" button to make sure your website is correct, then click "Save Template".

When composing a blog entry that contains source code, click the "Edit Html" tab and put your source code between these tags-

<pre name="code" class="cpp">
...Your html code goes here...
</pre>

Substitute cpp by the language you are going to use, check out all the languages supported.

You can also choose other languages like cpp, c, c++, c#, c-sharp, csharp, css, delphi, pascal, java, js, jscript, javascript, php, py, python, rb, ruby, rails, ror, sql, vb, vb.net, xml, html, xhtml, xslt

Thanks for reading SyntaxHighlighter in Blogger Post Codes you can also grab a free subscription to Chethstudios updates. We will be back with more useful content. Get latest hacks and updates on your email