loading...

Monday, November 8, 2010

how to add prettify a syntax highlighter to blogger

Syntax highlighter is very much needed for blogs or website in order to show their scripts or code to be  highlighted to differentiate from script and the post.Prettify a google hosted  javascript and css file that allows syntax highlighting of source code snippets in an html page.Its much easier to install and loads faster than any other syntax highlighters.
how to add Prettify to blogger.
Step1
Goto layout->edit html find </head> and paste the below code.


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

Step2
Find the below code
<body expr:class='&quot;loading&quot; + data:blog.mobileClass' >
and replace it with the below code (its nothing but Adding onload="prettyPrint()" to your document's body tag.)
<body expr:class='&quot;loading&quot; + data:blog.mobileClass' onload='prettyPrint();'>

Step3
Put code snippets in
<pre class="prettyprint">...</pre>
or
<code class="prettyprint">...</code>

and it will automatically be pretty printed.

Note:in this post i have used prettify 

No comments:

Post a Comment

fuzionpro Headline

fuzionpro