Syntax Highlighing For blogger post

Now, I am going to teach you how to add syntax facility to your blog post in blogspot. you can add this to your own website also. This is very useful to identify code snippets from thousands of text lines and it add some beautification to your website.

As usual, I have divided this tutorials into small steps.

Step 1

First of All, Backup your Blogger Template !! It is very useful to Restoration of  your blog, if you have done some wrong thing to your blogger template.

Then, Add following Code line after the </head> in blogger template.

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

Step 2

It is almost done !
Now you can write coding snippets  inside the <pre> tags.

<pre class="prettyprint">
source code here
</pre>

Example : php Code Snippet

<pre class="prettyprint">
$config['index_page'] = 'index.php' ;
</pre>

Demo :

That's All !!!

Note :

Your Codes  Displays with black color border. if you want to remove border around code snippet, add following code snippet to your blogger template before the ]]></b:skin>  tag.

pre.prettyprint {
border: none !important;
}

If you want to add line numbers to code snippet, add following css class to class attribute in pre tag.

<pre class="prettyprint linenums:4"

If you want to change language, add following css class to class attribute in pre tag.

<pre class="prettyprint lang-php"

Click Here To Download Code to your Website

Happy Syntax Highlighting !!!