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:
- Download the .zip archive
- Unzip the archive into a temporary directory
- Copy the plugins/SyntaxHighlighter directory to my plugins directory
- 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:
<$MTSyntaxHighlighterInclude$>
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
<body id="blogbase" class="whatever" onload="mtEntryOnLoad">
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:
<body id="blogbase" class="mt-entry-archive layout-wtt">
<script type="text/javascript">
mtAttachEvent("load", mtEntryOnLoad);
</script>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:
<$MTSyntaxHighlighterInclude brush="perl,python"$>
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.
Filed under: Software
Tags: syntax highlighting