HOWTO Setup Automatic Code Hilighting for Websites (and Blogger)

This is actually the method that this blog uses! The scripts below quickly find all code on a page, auto-detect what language it is, and highlight it accordingly.

Setting Up On Blogger

To set up on Blogger all you need to do is the following:

1. Open the "Template" menu on the left side of your blog's dashboard.
2. Press the "Edit HTML" button below your template.
3. Just copy and paste the following code right before the </html> tag.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://balupton.github.com/jquery-syntaxhighlighter/scripts/jquery.syntaxhighlighter.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('pre').each(function() {
$(this).addClass( "highlight" );
});
$.SyntaxHighlighter.init();
</script>

On Your Website

Alternately, you can add this to your website for automatic code finding and hilighting! Just make sure to add it to the very bottom of your page, or add the third Javascript code block that runs once the page is loaded.

If all of your code is in <code> blocks, just change the pre on line four to code.

Side Note: You probably want to use your own versions of jQuery and jQuerySyntaxHilighter so you can update them yourself.