Part of this blogs new design will include a code syntax highlighter, which will make reading code snippets and copying them for personal use easier. The syntax highlighter is a JavaScript solution that will covert specially formatted pre tags into clean documentation. It is the same tool used by YUI throughout their documentation and is public available at Syntax Highlighter Project.

Unfortunately, the latest version of the system (1.5) is not well documented. Most of the documentation works with version 1.3, but there were drastic changes in version 1.5. To get 1.5 to work, you need to include shCore.js and all the brushes for the languages you want to highlight, then call dp.sh.HighlightAll.

Example 1: dp.sh.HighlightAll

dp.sh.HighlightAll(db.highlight);

The HighlightAll function will then search for all pre and textarea tags with the name="db.highlight" and apply the necessary brush that is defined in the class attribute. In the documentation is says that the class should be brush:language. I found that the highlighter fails if there is a space on either side of the colon. Also, I had to change one line of code in shCore.js to make it work:

Example 2: Code Change in shCore.js

language = options[0].toLowerCase();
to
language = options[1].toLowerCase();