Making Code Samples Readable Online

After lazily just pasting code in <pre> blocks for years, this morning I finally got around to researching a code highlighter like you see on almost all the programming websites.

Thanks to SyntaxHighlighter adding this feature was embarrassingly easy. It is self-contained javascript that works on a pre or script tag decorated with a html class calling a brush alias, e.g.

<pre class="brush: sql">
   INSERT INTO MyWebsite (pre, script)
      VALUES (complete, awesomeness)
</pre>

Oh, but it's not just SQL, no there's a whole easel of brushes included:

Brush name	Brush aliases	File name
ActionScript3	as3, actionscript3	shBrushAS3.js
Bash/shell	bash, shell	shBrushBash.js
C#	c-sharp, csharp	shBrushCSharp.js
C++	cpp, c	shBrushCpp.js
CSS	css	shBrushCss.js
Delphi	delphi, pas, pascal	shBrushDelphi.js
Diff	diff, patch	shBrushDiff.js
Groovy	groovy	shBrushGroovy.js
JavaScript	js, jscript, javascript	shBrushJScript.js
Java	java	shBrushJava.js
JavaFX	jfx, javafx	shBrushJavaFX.js
Perl	perl, pl	shBrushPerl.js
PHP	php	shBrushPhp.js
Plain Text	plain, text	shBrushPlain.js
PowerShell	ps, powershell	shBrushPowerShell.js
Python	py, python	shBrushPython.js
Ruby	rails, ror, ruby	shBrushRuby.js
Scala	scala	shBrushScala.js
SQL	sql	shBrushSql.js
Visual Basic	vb, vbnet	shBrushVb.js
XML	xml, xhtml, xslt, html, xhtml	shBrushXml.js

Steps to install Syntax Highlighter

1. Go to http://alexgorbatchev.com/wiki/SyntaxHighlighter and download the source code
2. Upload the source code to somewhere accessible on the internet, note the url
3. Follow the installation instructions for blogger available here http://geektalkin.blogspot.com/2009/11/embed-code-syntax-highlighting-in-blog.html (general installation and usage here http://alexgorbatchev.com/wiki/SyntaxHighlighter:Usage).
4. Was it good for you? Send Alex a beer.

Thanks Alex! I sent you enough to cover a pizza.