fourtytwo: 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

Open Blogger.com and go to your Blog
Go to Template, Edit HTML and click Proceed
Search for the Open Tag of body: "CMD-F <body"
Insert the following to Lines before the closing tag of head

<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">

Modify the body tag

<body onLoad="prettyPrint()">

The template should now look like:

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

fourtytwo

Sunday, August 5, 2012

Add Code Blocks to Blogger with Google Code Prettify

25 comments: