highlight.js Source Syntax Highlighting

I just added dynamic source code syntax highlighting to this blog. I opted to use highlight.js instead of the more popular syntaxhighlighter. Both are nice, but I liked the simplicity of highlight.js.  It uses a single JavaScript file, and the formatting is pure CSS.  It’s compatible with wiki-style markup such as Tiki or Markdown, and best of all (in my opinion), it does a reasonably good job of auto-detecting the source language.  You can also override the detection, if desired.

There is a download form on the highlight.js web site that will build an optimized JavaScript file for you.  Copy it to your server, and add these lines to your page:

<!-- highlight.js -->
<script type="text/javascript" src="http://www.example.com/js/highlight.pack.js"></script>
<script type="text/javascript">
	hljs.initHighlightingOnLoad();
</script>
<link rel="stylesheet" type="text/css" href="http://www.example.com/css/hl/sunburst.css" />
<!-- highlight.js -->

Add some CSS:

/* code block */
pre code {
	font-size:1em;
	font-family:"Consolas","Monaco","Bitstream Vera Sans Mono","Courier New",courier,monospace;
	line-height:1.1em;

	display:block;
	background: #333333;
	width: 100%;

	padding:0px;
	overflow:auto;
	overflow-y: hidden;

 	white-space:pre-wrap;
}

And you’re good to go.