I write about tech stuff and include code snippets. I was hoping to highlight syntax in my posts. While looking for a solution for my Movable Type 4.1 blog, I came across a few alternatives, of which I'd like to give you a review.
The Moveable Type candidates
First I was checking out the official Movable Type Plugin Directory. Two solutions were listed: CodeBeautifier and MT Colorer.
CodeBeautifier was the first solution for Movable Type (supporting version 2.6 to 3.3), based on its own highlighting backed. MT Colorer supports version 3.2 and 3.3 of Movable Type and uses the colorer library. But both plugins do not support the current version 4 line of Movable Type. So both were a no go.
Using Google, I found another plugin called MT Highlight. It uses the highlight library by the author of MT Highlight. The highlight library seems to be quite outdated, so does the plugin, too. It also supports the version 3 line of Movable Type.
The JavaScript candidates
The next approach was to use a JavaScript based source code highlighter, which highlightes any code snippets on the fly while a browser is displaying a blog entry.
I found two solutions using Google: star-light and SyntaxHighlighter.
star-light seemed to be too unflexible to me, supporting just a few languages. SyntaxHighlighter on the other hand is even used for syntax highlighting at the Yahoo Developer Network.
Too cut a long story short, I chose SyntaxHighlighter. Now I'd like to show you, how to integrate the JavaScript library very easily.
How to install the syntax highlighter
First download SyntaxHighlighter. Upload all files to your mt-static folder on your server.
Next open your Movable Type web administration interface and open up the templates section. Choose the Template Modules filter. Editing the Header template, you should add the following lines right after <$mt:var name="html_head"$>:
After saving the template you should be editing the Footer template and add the following lines right before the <body> tag:
Regarding the <script language="javascript" src="/mt-static/Scripts/shBrushPhp.js"></script> section you need to decide, which languages you want SyntaxHighlighter to display.
To even optimize performance, I'd suggest to combine all of SyntaxHighlighter's JavaScript files via YUI Compressor, a JavaScript Minimizer.
How to use the syntax highlighter in your posts
To display a code snippet all you need to do while writing a post is to surround the snippet with:
For more options using SyntaxHighlighter, see the supported languages documentation and the configuration options documentation.
Thank you very much for the article. That was exactly what I was looking for. Can't believe you just wrote that a few days ago.. and I started looking a few minutes ago. Anyway, thank you for taking the time to write that up so that others could benefit!
- Matthew