Syntax Highlighting with Mid-Century themes

As a site that discusses a variety of programming languages, I thought it would be good to have syntax highlighting for the code snippets. This blog previously ran [Movable Type][] so it had to fit in with the setup I have already.

So I found the [Syntax Highlighter][] module ok and the initial installation
went fine, it was simply:

1. Download the .zip archive
2. Unzip the archive into a temporary directory
3. Copy the plugins/SyntaxHighlighter directory to my plugins directory
4. Copy the mt-static/plugins/SyntaxHighlighter directory to static/plugins

You then need to edit the “HTML Head” template and add to the bottom of it the following line:


Next, I like to use [Markdown][] as my “markup” language. But you can only have one type text filter. Another plugin called [FormatStack][] solves this.
Create a new stack and put [Syntax Highlighter][] before [Markdown][].
You can then create documents with both sorts of tags and it works quite nicely, well… almost.
Mid Century Problems
——————–
This is probably not a Mid-Century specific problem but the modern templates
or styles may cause a problem. You’ll find you switch styles and suddenly, no more syntax highlighting.
The problem is the onLoad functions get overloaded. Some styles have
an onload property on their body. You’ll see lines similiar to


This onload event stops other onload events, which means Syntax Highlighter cannot do its thing. The fix is rather simple, you just adjust thetemplates so they look like the following:



mtAttachEvent("load", mtEntryOnLoad);

After doing this and publishing it all worked! You may also see this sort of problem with other plugins that use the mtAttachEvent() Javascript call.

Reducing Includes
—————–
By default, the script includes all syntaxes it knows. If you want to only include some, you do this by specifying what brushes you want. For example if you only will highlight perl and python scripts then you can change the line to:


Syntax Themes
————-
The other attribute the Include line will take is theme. There are several themes but default is alternating white on grey with the rest being
variations on light text on a dark background.

[Syntax Highlighter]: http://plugins.movabletype.org/syntaxhighlighter-for-movable/
[Movable Type]: http://www.movabletype.org/
[Markdown]: http://daringfireball.net/projects/markdown/
[FormatStack]: http://plugins.movabletype.org/formatstack/


Comments

Leave a Reply

Your email address will not be published. Required fields are marked *