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,

]]></b:skin>

     4.  And just below it paste the following code,

<!--SYNTAX HIGHLIGHTER BY MBT STARTS-->
<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;;
SyntaxHighlighter.all();
</script>
<!--SYNTAX HIGHLIGHTER BY MBT ENDS-->

 

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

ADD THE PARSED CODE HERE

</pre>

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,





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 ▼
PLEASE NOTE:
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.

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

    ReplyDelete
  3. @jeet

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

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

    ReplyDelete
  4. Am sure blg will slow down these javascritps

    ReplyDelete
  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 :)

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

    http://internetricks4u.blogspot.com/

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

    ReplyDelete
  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 :)
    Thanks

    ReplyDelete
  9. Very Cool !

    http://www.yourpcgenie.blogspot.com

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

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

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

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

    ReplyDelete

 
  • MBT Icons and buttons

    Icons and Buttons

    Our resources have been successfully downloaded over 10K times and found almost every where. Get yours!

  • choosing webhost for a blog

    Why HostGator?

    Learn Why we chose HostGator as our Web Host and find discount coupons to kick start your blog today!

  • SEO Settings for blogger

    ALL IN ONE SEO PACK 2012

    Learn every single SEO tip that will boost your blog's ranking and organic traffic. We got them all!

  • Blogger widgets and plugins

    Visit MBT's Blogger LAB

    Why not take a tour of all great Blogger widgets published so far? You Name it we have it!

  • become a six figure blogger!

    Become a SIX FIGURE BLOGGER

    Learn what it takes to become a successful entrepreneur and build a living online!