How to Add Syntax Highlighting in Blogger Post?

This Post totally write by Matthew V Ball and his post is Adding Syntax Highlighting to Blogger.

Step 1. Go to this link, then perform a "select all" and "copy". The css information is now in the clipboard.

Step 2. Paste the css information at the end of the css section of your blogger html template (i.e., after <b:skin></b:skin>).

Step 3.Before the </head> tag, paste the following:

<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>

Step 4. Before the tag, insert the following:

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

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

Step 6. When composing a blog entry that contains source code, click the "Edit Html" tab and put your source code (with html-escaped characters) between these tags:

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

(Note: This article is somewhat dated because SyntaxHighlighter 2.0 was released in February 2009. However, this article is still valid for those who prefer the older 1.5.x version or who don't want to upgrade)

5 comments on "How to Add Syntax Highlighting in Blogger Post?"

This is DoFollow Blog Leave a Comment

Ecommerce Web Design on July 20, 2010 at 12:27 PM said...: not working on my blog...it says HTML errors
Muhammad Wajid on July 20, 2010 at 1:50 PM said...: @ Ecommerce Web Design
Try to read complete I am sure u can do this
Google Adsense Code Converter on August 27, 2010 at 5:39 PM said...: Thanx Alot
custom web design on September 27, 2010 at 5:31 PM said...: i did it again ....it works now :) thank u wajid
Professional Web Designer on December 3, 2010 at 4:21 PM said...: Very Well Written, Practical Work Really Help me in Adding Syntax