Wednesday, 30 January 2013

How to use prettify with blogger/blogspot?

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.
Reactions:

0 comments:

Post a Comment

Leave a comment on blog quality.

Blogger

Related Posts Plugin for WordPress, Blogger...