Prettify Syntax Highlighter for 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

Step 1: Go to your Layout settings and select Edit HTML, and then click in the Edit Template area. You need to add the following code somewhere within the <head> section - I did it just above </head>

<script src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js' type='text/javascript'/>

Also in the template, modify the <body> tag to look like

<body onload="prettyPrint()">

The Prettify comes with two color schemes Desert and Sunburst both are good. You can add any color scheme, add either of the two lines of code before </head>.

<link href='http://google-code-prettify.googlecode.com/svn/trunk/styles/desert.css' rel='stylesheet' type='text/css'/>
OR
<link href='http://google-code-prettify.googlecode.com/svn/trunk/styles/sunburst.css' rel='stylesheet' type='text/css'/>

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 --- An Example
<pre class="prettyprint">
$(document).ready(function() {
 alert('I am using Prettify as Syntax Highlighter');
});
</pre>

If you have any problem, feel free to contact me.

Enjoy this article? Get Free Updates