Saturday, October 11, 2008

Code highlighting on blogger

Ok lets see if new highlighter works.

#! /bin/env python

def python_funct():
a = a + b
print "Hello Highlighted code"

class Foo(Bar):

So how to do it?
Simply use googles own client side code highlighting library .

Its easy. Just include this two lines at top of your blogger template:

<link href="" type="text/css" rel="stylesheet" />
<script type="text/javascript" src=""> </script>

And change body tag in your template to include onload="prettyPrint()":
<body onload='prettyPrint()'>

And thats it. Now all you have to do when you want highlighted piece of code in your blog is to use.

<pre class="prettyprint">
... # Your code goes here
EDIT: Urls to prettyfy.js and prettyfy.css were wrong. They are fixed now.


Guido van Rossum said...

I followed your recipe on, and I verified that all the elements are indeed in the page, but it doesn't work. What am I missing?

union said...

I somehow managed to included the wrong url's to the prettyfy.js and prettyfy.css files like Boris Bluntschli pointed out in his comment.

I have fixed the url's in the post.

I am sorry for waisting your time :(

Guido van Rossum said...

No problem. It works now. Thanks for teaching me!

Pierre Lindenbaum said...

very cool ! thanks !

Horacio Mijail said...

Thank you for the summary!

GuiSim said...

omg you thought Guido something.

Nice post !

Unknown said...

i use this to do my Code highlighting...

its easy to implement on blogger has hosting and has multiple styles and lots of language support

Ronnie Beltran said...

i followed the steps, i now have code highlighting. thanks

_b1 said...

How you past code and blogger`s parser correct understood it?