top_menu

Sunday, 2 September 2012

How to use prettify with blogger/blogspot?

.

Google Code Prettify is a Javascript module and CSS file that allows syntax highlighting of source code snippets in an html page.

Today i implemented it into this blog. It makes those programming codes look nice with a great color combination.

It works well in all blogging platforms as well as in your own website or forum.

colorful programming code

Following is the trick that will guide you to implement the same in your blogger blog.

Step -1 )   Go to your blogger dashboard -> Template -> Edit HTML -> Proceed

Step-2)    Copy the following snippet and paste it immediately after "<head>"

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

<style>

code.prettyprint, pre.prettyprint{

font-family: Courier,monospace,Courier New;

    font-size: 13px;

    color: rgb(0, 0, 0);

    border: 2px dashed rgb(222, 222, 222);

    padding: 10px;

    line-height: 16px;

    width: 547px;

}

code, pre{

white-space: pre-wrap; /* css-3 */

white-space: -moz-pre-wrap; /* Mozilla, since 1999 */

white-space: -pre-wrap; /* Opera 4-6 */

white-space: -o-pre-wrap; /* Opera 7 */

word-wrap: break-word; /* Internet Explorer 5.5+ */

}

</style>

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

<script language='javascript' src='http://google-code-prettify.googlecode.com/svn/trunk/src/lang-css.js' type='text/javascript'/>
 
Step-3)  Now replace "<body>" with "<body onload='prettyPrint()'>"

Step-4) Click "SAVE TEMPLATE"

Step-5)  Come back to Blogger Dashboard -->Posts-->New Post.

Step-6)  The programming code snippen that you put in, needs to have its HTML cleaned from. Hence to do this just paste your code in here: http://www.simplebits.com/cgi-bin/simplecode.pl

Step-7) Put your code inside a "<pre>" tag and add a "prettyprint" class to your <pre> tag Ex:  
<pre class="prettyprint">int foo=0;
NSLog(@"%i", foo);
</pre>

 OR
<pre class="prettyprint">int foo=0; NSLog(@"%i", foo); </pre>
Step-8) In your Blogger Text Editor, switch from Compose mode to HTML mode

Step-9) Paste it into blogger and publish it.