Labnol Style Code Highlighter For Blogger

Hey readers! It's been a while, isn't it!?

Amit Agarwal beautifully displays his code on Digital Inspiration. One of my readers, whose name is also Amit, requested me to write this tutorial. So here I am! What we will do is add a simple CSS code to our template in such a way that whenever we use the<blockquote> tags, the CSS will automatically take charge and display the code in a highlighted way!

Try hovering on the demo!

Live Demo:

<object width="400" height="224" > 
 <param name="allowfullscreen" value="true" /> 
 <param name="allowscriptaccess" value="always" /> 
 <param name="movie" value="http://www.facebook.com/v/xxx" /> 
 <embed src="http://www.facebook.com/v/xxx" type="application/x-shockwave-flash"  
   allowscriptaccess="always" allowfullscreen="true" width="400" height="224"> 
 </embed> 
</object> 

Steps to implement

1. Go to your blogger dashboard --> Template --> Edit HTML

2. Find this piece of code:

 ]]></b:skin>

3. Paste the following code directly above/before ]]></b:skin>

 blockquote{
        margin: 0px;
        border-radius:5px;
        -webkit-transition:background 200ms linear;
        -moz-transition:background 200ms linear;
        -ms-transition:background 200ms linear;
        -o-transition:background 200ms linear;
        transition:background 200ms linear;
        background: #EEEEEE;
        font:15px/1.5 Courier, monospace !important;
        margin-bottom:2em !important;
        padding:0 1em 1em 1em!important;
        white-space:pre-wrap;
        white-space:-moz-pre-wrap;
        white-space:-pre-wrap;
        white-space:-o-pre-wrap;
    }
blockquote:hover{
        background:#f9f9f9;
    }

4. Hit Save Tempalte.

5. We have edited the template, the only thing left is add the <blockquote> tags whenever we need to highlight the code!

The good thing is, Blogger provides an easy way to do it ;)

When you are writing the post, simply select the code you want to highlight and hit the little "quotes" button on the top!

6. You are done! The code you selected will automatically be surrounded by the<blockquote> tags and the CSS that we added earlier will automatically take effect!

Note: Normally, we use this trck to disply code. However, you can also use it to display normal text in a highlighted way. Simply select the text and hit the "quotes" button.

Hope this tutorial helped you, Amit :) Let me know if you have any doubts.

And to my other readers, if there is some tutorial you want me to write, comment here! I will try my best to publish it!