February 11, 2012

Adding Prettify Syntax Highlighter to your Blogger Blog

If you are running a website where you share certain code maybe javascripts or HTML/CSS codes, then you must be interested in highlighting those codes in a meaningful manner. One of the best way of doing so is by using Syntax highlighters. Prettify by Google is also a very good and powerful syntax highlighter which you can easily add to your Blogger Blog.

Prettify syntax highlighter blogger blog

So at first you have to download the Google Prettify to your computer and extract the files. Now within the extracted folder find for prettify.js and prettify.css files and upload these to your hosting service(Dropbox or Google Code).

Now open the Template Editor (Blogger’s dashboard > Template > Edit HTML) and search for </body> and just before this tag add the following piece of code.

<script src="Your-Link-to-prettify.js"></script>
<script>prettyPrint();</script>

The Prettify comes with two color schemes Desert and Sunburst both are good and the CSS files are present in the Prettify folder. Open the css file of the colour scheme chosen by you and copy the content. Now search for ]]></b:skin> and just before it add the copied content.

And finally to use the syntax highlighter in your post add the pre or code tags with class prettyprint and enclode all the code within these tags. You can take help of the example given below.

//Highlighting a Javascript code
<pre class="prettyprint">
$(document).ready(function() {
 alert('I am using Prettify as Syntax Highlighter');
});
</pre>