Monday, July 19, 2010

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><!--[CDATA[/* and before ]]--></b:skin>).


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


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


Step 4. Before the tag, insert the following:

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

Stumble
Delicious
Technorati
Twitter
Facebook







Related Posts by Categories







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

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment

 

Latest Blogger Tricks,Tips,Tutorial,Template,Widgets