SyntaxHighlighter

I have a colleague, who is always monitoring 2392 blogs, 503 RSS-feeds, and 3922 websites. So he doesn't miss out on the little things that make life or work just a little bit more efficient. His laptop and PC have over 293 little tools installed, which enables him to get his work done three clicks faster than the regular guy. He is Tool Man Tony.

Yesterday, he forwarded me an e-mail notification of one of his (many) RSS-feeds, which drew my attention. It was a blog post about a syntax highlighter tool, like the one found in your favorite IDE (Integrated Development Environment). But this one is different. This one is meant for highlighting code in web pages.

The tool is called SyntaxHighlighter. It's basically JavaScript files you can include in your blog or website to highlight code fragments, which make your code much more readable. Additionally, it can also number the lines of your code fragments automatically. All of this happens client-side. A screenshot of highlighted code:



SyntaxHighlighter supports most popular programming languages. The complete list of supported languages can be found here.

Installing and using SyntaxHighLighter is easy, and consists of the following basic steps:

1. Download the installation files here.
   
2. Extract the files and include them to your web page: shCore.js and shCore.css.
   
3. Add brushes (syntax files) for the languages you want to highlight.
   
4. Use <pre> or <script> tags to enclose your code fragment.
   
5. Call the JavaScript method SyntaxHighlighter.all() to invoke SyntaxHighlighter.
   

As you can see, SyntaxHighlighter is loosely coupled to your web page, and is very easy to use.

Thanks Tool Man Tony for the tip!

Official SyntaxHighlighter site: http://alexgorbatchev.com/SyntaxHighlighter/