Thursday 6 September 2007

Easy syntax highlight embedded code on your blog

For some time I have been looking for a easy way to syntax highlight code snippets on my blog as my default stylesheet seems to do a bad job.

I came across tools like:

But the one I found most interesting is google-code-prettify that Hung Huynh recommended me.

Prettify only requires you to include a small stylesheet and a single javascript file containing the code doing the hard work - see the simple readme
Then you just surround you code with - say <pre class="prettyprint"> and voila! your code is syntax highlighted.

I have updated some of my older posts so you can see the prettifier in action:

2 comments:

Sébastien said...

I like google-prettify too and use it on my blog (http://be-java.blogspot.com) but I have a little problem with it and blogger. Since there's no ftp access, I had to put the prettify.js file on another host (like you had to: ttp://www.jacobve.dk/blog/prettify/prettify.js). But now with firefox and plugins like noscript, it always shows a warning to the visitors (if they use that...) because the js file comes from somewhere else :(

Robert Mark Bram said...

Thank you for this - the first search result I came across in answer to my search for ways to syntax highlight code in my blog. I found this other blog post with a way to incorporate it nicely into Blogger: Publish Source code in Blogger

I agree with Sébastien's concern about it being picked up as an external script. I thought for a while about just this point, wondering whether I should instead include the whole source as a HTML widget instead.

Given the choice of including it as a widget or linking to it from Google's own site, I will go with the linking. Including the source as a widget is ugly because there is a lot of data in the css and js files. If I link to it instead, even though some plugins might pick out the fact that I am linking, we get: 1) automatic updates because we link to the trunk copy i.e. it is always updated and 2) the caching of a link by the browser. I think the advantages of linking outweigh the potential loss of viewers or discomfort to those who don't trust seeing an external link in the page.

It is still a worry though.

Rob
:)