Syntax Highlighter for Blogger using Prettyfy

Adding Prettify Syntax Highlighter to any CMS or webpage is very easy. For Blogger you just need to go to your blog’s Template tab, click “Edit HTML” button and add the below script before </head> tag.

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js">

As you can see that the project is hosted on Google Code. This is an auto-loader which will automatically load the required JavaScript API and the CSS file from the subfolders of SVN. So the last thing that you are left is to mention where it should highlight the codes by adding class="prettyprint" to pre and/or code tags within Blogger Post Editor, HTML view. Here is an example:

<pre class="prettyprint">
$(function() {
 alert('I am using Prettify as Syntax Highlighter');
});
</pre>

There are also some styles available that you can call and load the stylesheet in one URL, here is an example:

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?skin=sunburst"></script>