Add Syntax Highlighter To Blogger Blogs

Few days back I have shared a post about Syntax Highlighter WordPress plugin to beautify your posts on wordpress blog. Now here is tutorial to add the same syntax highlighter to blogger blogs. Simply follow the steps given below :

1. First of all copy the code given in this link and paste it before </b:skin> tag.
2. Now paste the followig 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>

3. Now search for the </body> tag and paste the following code before it :

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

4. Click on Save Template.
5. Whenever you have to write some codes in your posts, simply write the codes between the following tags :

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

Thanks to Heisencoder for this beautiful coding for blogger blogs

Tagged as: Blogger, Blogspot