I was not very much satisfied with the syntax highlighting component which comes out of the box with BlogEngine.Net. And of course, being a programmer I couldn't resist myself to leave the code look ugly. After some research on internet about the various free options available for code highlighting, I zeroed onto google-code-prettify.

It is a Javascript module and CSS file that allows syntax highlighting of source code snippets in an html page.

Features

1. Works on HTML pages
2. Works even if code contains embedded links, line numbers, etc.
3. Simple API : include some JS&CSS and add an onload handler.
4. Lightweights : small download and does not block page from loading while running.
5. Customizable styles via CSS. See the themes gallery
6. Supports all C-like, Bash-like, and XML-like languages. No need to specify the language
7. Extensible language handlers for other languages. You can specify the language.
8. Widely used with good cross-browser support. Powers code.google.com and stackoverflow.com

P.S. : Dainis Graveris has compiled a nice list of all the options available. Worth while looking before you start with it. Integration with BlogEngine.NetYou can always write an extension do it in a nice way. I followed the quick and dirty way:

• Add the following reference to the head of the site.master of the theme where you want to apply the changes. Ofcourse if you want to keep a local copy of the js and css files, you can do that as well.

<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'/>

• Add the onload method on the body:

onload='prettyPrint()'

• Change the text/html editor to render the correct class for the PRE tag. Change the file at editors\tiny_mce_3_4_3_1\plugins\insertcode\js\dialog.js and in the function insert, change the classname to prettyprint.