June 29, 2011

Add Syntax Highlighter To BlogSpot Blogs

SYNTAX-HIGHLIGHTERMost bloggers use the standard blockquote to share tutorials based on scripts and codes with their visitors but Alex Gorbatchev has created an amazing fully functional Highlighter that neatly displays web technologies such as HTML, CSS, JavaScript, Php, Python, Sql, xml etc. The codes are displayed line by line number wise. It also provides the user with options to Print the code, copy it to clip board or to see the code Source.

Alex has released the latest version (3.0.83) but we will use the old version (2.1.383) as it contains the options I mentioned above. Each code type comes with a script called Brush. I have used the most popular brushes as I mentioned earlier but if you wish to use a brush of your choice then you can select one from this Brush list.

Live Demo

How To Add Syntax Highlighter In Blogger?

The steps are more simple than you can imagine. I have tried to make the installation as easy as possible. Follow these steps,

  1. Go To Blogger > Design > Edit HTML
  2. Backup your template
  3. Search for this,


     4.  And just below it paste the following code,

<link href='http://alexgorbatchev.com/pub/sh/2.1.382/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/2.1.382/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shYouBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPerl.js' type='text/javascript'/>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = &#39;http://alexgorbatchev.com/pub/sh/2.1.382/scripts/clipboard.swf&#39;;


     5.   Save your template and you are done!

How it works?

Whenever you wish to share a code of any type with your readers, simply enclose the code between these lines,

<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python">



I have combined all brushes into one making it easier for newbie to implement the tutorial.

Note: Do not add the code directly because you will get error in Blogger Editor, instead first parse the code using the Parser Tool provided by us.

Replace ADD THE PARSED CODE HERE with the parsed/encoded code and publish your post to the see the magic.

That's it! Hope you like it. I will publish different color schemes for Syntax Highlighter in my next posts so make sure you don't miss the update. I also published some block quotes with auto number list and if you wish you can use them instead by reading this tutorial,

Need Quick Help within 24 Hours? ASK NOW

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

19 comments : Post Yours! Read Comment Policy ▼
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. Hello Mohammad,
    i was waiting for this post.
    excellent work brother.

  2. wow, there has alot of javascript.. confirm will make blog slower. i think better use pre code

  3. @jeet

    Oh you are welcomed buddy. Make sure you don't miss a beautiful theme as I will publish it today. :d

    Not much daus. The scripts are stored at their servers and not the blog is responsible only for fetching data out of them.

  4. Am sure blg will slow down these javascritps

  5. Really an awesum Post and your site too contains the Informative content. . . Waiting for this. . thnxxx a lot bro. . for sharing...Keep gng and Keep sharing :)

  6. very very nice tutorial friend
    i used it in my blog, you can see it from here


  7. MashaAllah bro, very easy tutorial.. :)

  8. And one more thing Mohammad bro, can you please tell how to add a line above all code to tell reader how to copy code? Like
    "To copy code click <> icon on right"
    This you can see on bloggersentral website.
    Please also add this in your tutorial.
    Waiting :)

  9. Very Cool !


  10. And one more thing bro, I have inserted this code without parsing it and it did not give any error.
    I have also checked the current version of Syntax Highlighter from Alex's website, I think that's more cool and easy to use as the current version did not need flash to copy the code (as written by Alex).
    Well, I am planning to implement the current version on one of my blogs, and I have also got how to add title to code :D..
    Well thanks alot for this tutorial, I learned something new today :D..

  11. great tutor, i already using highlighter on my blog

  12. thank you very much for this tutorial.
    My blog ••• http://developer-designer.blogspot.com

  13. hi muhammad thanks for this nice blog quote. But can you tell me that how can i add block quote like yours. Please give me the codes.