Sunday, August 5, 2012

Add Code Blocks to Blogger with Google Code Prettify

Info: I think the SyntaxHighlighter is a much better solution then google code prettify


Add Google Code Prettify Dependencies
  1. Open Blogger.com and go to your Blog
  2. Go to Template, Edit HTML and click Proceed
  3. Search for the Open Tag of body: "CMD-F <body"
  4. Insert the following to Lines before the closing tag of head
  5. <link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" rel="stylesheet" type="text/css"></link>
    <script src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js" type="text/javascript">
  6. Modify the body tag
  7. <body onLoad="prettyPrint()">
    
  8. The template should now look like:
  9. ...
    <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'/>
      </head>
      <body onload='prettyPrint()'>
      ...
    

Now you can easily add a code block by creating a pre tag with the prettyprint class, e.g:

<pre class="prettyprint">
   var fourtytwo = "The Answer to the Ultimate Question of Life, the Universe, and Everything";
</pre>

No comments:

Post a Comment