Thursday, March 26, 2009

Adding Google's google-code-prettify to Blogger


Guido Van RossumImage by palewire via Flickr
Wanted to be able to add highlighted code snippets, so copied how Python's Guido does it (nice example), as a stop-gap.

Blogger's support for programming code is embarrassing; zero-support given. So this is at best a partial fix. It makes use of Google's own google-code-prettify Javascript code. It is easy to use, so the whole of the docs fits easily on a single page:


Using "Blogger Control Panel | Layout | Edit HTML": just inside the "<head>" block, add these CSS and Javascript links:
<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>
Then add "onload='prettyPrint()'" to the opening "<body>" tag
<body onload='prettyPrint()'>
You will need to use HTML escape if the code had naughty HTML syntax characters (&,",',>,<). A good writeup: http://wiki.python.org/moin/EscapingHtml. [Don't be confused like I was: this is different functionality than the xml.sax.saxutils function quoteattr !]. You can also use an online HTML escape tool like htmlescape.net.

Then put whatever code you wish between these HTML brackets
<pre class="prettyprint"> ... </pre>
Here is a tiny snippet of Python highlighted code:
def hello(i):
print "hello"
print i
For a whitespace sensitive language like Python, it pays to take a little caution, to compensate for the typical laxness of whitespace preservation in HTML and Blogger's basic editing tools. Type or cut-and-paste the code in the "Edit Html" tab - you will get good and predictable results.

In general, when using Blogger's in browser WYSIWYG editing tools, check the "Edit Html" tab last, just to make sure that Blogger's editing tools did not strip extra spaces from your Python code
Reblog this post [with Zemanta]

No comments: