The Google Code Prettify is a JavaScript module that allows syntax highlighting of any code snippets on a HTML page.  Setting this up on any web page is a simple 3 step process, and is supported on most common browsers.

[Demo]   (Based on:  prettify-21-May-2009.zip)
[Download Source Files]

1) Include the JavaScript and CSS file within the head of the HTML page

2) Include the action onload=”prettyPrint()” within the body element

3) Wrap your code snippet between pre tags: <pre class=”prettyprint”>…</pre>

Notes:

For code snippets containing “<” and “>” characters, “;&gt” and “;&lt” must be replaced in order to work, for example HTML code.

You can explicitly specify the code language to render, for example in Step 3 we can extend this by forcing it to Perl, using <pre class=”prettyprint lang-perl“>…</pre>
The languages available are “bsh”, “c”, “cc”, “cpp”, “cs”, “csh”, “cyc”, “cv”, “htm”, “html”, “java”, “js”, “m”, “mxml”, “perl”, “pl”, “pm”, “py”, “rb”, “sh”, “xhtml”, “xml”, “xsl”.

Line numbers can be included by added <span> 1: </span> at the beginning of each line (this is a bit of manual work though).

Lisp, CSS, Haskell, LUA, OCAML, SML, F#, Visual Basic, SQL, Protocol Buffers, and WikiText languages are also support by inclusion of src/lang-*.js files.  See FAQ.

Related Posts:

1. Overlay & Slideshow Images with Lightbox 2
2. Get URL Variables in JavaScript & HTML
3. A Better LightBox Using jQuery

Here are the installation steps:

1) Download the plugin zip file.
2) Extract plugin into /wp-content/plugins directory.
3) Activate the plugin.
4) When posting, use the HTML editor and insert the following code:
<pre name="code" class="sql">
select * from tab;
</pre>

5) Hopefully looks like:

select * from tab;

The google documentation for using the syntax highligher is available here.

Related Posts:

1. Upgrading to WordPress 2.7 Coltrane
2. WordPress Code At The End Of URLs, Hack?