Syntax Highlighting with MarsEdit on WordPress

Monkey on KeyboardIf you blog using MarsEdit and publish to your WordPress-based site and you sometimes need to intersperse your articles with code snippets, you’ll find that it’s a real pain to use MarsEdit’s rich editor. It was for me. You see, MarsEdit (as of version 3.5.6) often tries to be too helpful and incorrectly reformat the code block that I’ve pasted into its rich text editor. I’ve tried pasting already HTML-formatted code block from Xcode, and that didn’t work very well. I’ve tried various WordPress plugins that does syntax highlighting (triggered by special pseudo-tags) but wasn’t satisfied with the results.

I’m not a big fan of fiddling around with HTML code —especially not in blog posts — and that’s exactly why I bought MarsEdit in the first place. Writing good content is hard enough and I don’t want to be burdened by fiddling with yet another computer language just to express my thoughts to other people. That is until I find this special technique and plugin combination which works quite well.

What do you need

The Setup

Go to your blog administration page, select the SyntaxHighlighter plugin and tick the “Load All Brushes” check box. This will enable syntax highlighting using the <pre> tag and not the [code]…[/code] custom markup that it normally wants. Many decent WYSIWYG blog editors (including MarsEdit) will recognize that this is a pre-formatted text block and not mess it up.

SyntaxHighlighter Settings 

The Technique

Whenever you want to paste-in a source code block, flip to MarsEdit’s HTML view, insert a <pre></pre> section and paste your code block in there between those <pre> tags. Then switch over to the rich view and verify that your code doesn’t get messed up. You’ll need to take care to escape some special characters within those block:

  • Replace < (less-than sign) with &lt;
  • Replace > (greater-than sign) with &gt;
  • Replace & with &amp;
Remember that the replacement always begins with the ampersand character “&” and ends with a semicolon “;“. Also refrain from entering any characters that you can’t type on a standard US keyboard in that block — MarsEdit may choke on it. This happened to me when I have the ellipsis “…” character in my <pre> block, MarsEdit incorrectly escaped and unescaped as I move back-and-forth between the rich and HTML editing modes.

On that same tone, you’ll want to switch back and forth a few times between the rich and HTML modes to ensure that your code block remains intact. Just make sure that there are no extra “&” get inserted or other weird symbols mysteriously manifest in your code block. Also pay special attention on the syntax highlighting when in HTML mode before switching to rich text mode, an unescaped < or > may cause your article to become corrupted when you switch to rich text mode.

When you’re satisfied with your code block, it’s time to add the special sauce to make your code syntax highlighted. Add class="brush: x" at your opening <pre> tag where “x” says what is the programming language of the snippet inside the <pre> block. Just take a look at the example below:

SyntaxHighlighting CSS Class

These are the available syntax highlighting languages that are supported by the plugin. If you can’t find your favorite language, try selecting something close to it. For example, I use “c” as the syntax highlighting language although it’s a code snippet for Objective-C. 

  • ActionScript3 – as3actionscript3
  • Bash shell – bashshell
  • ColdFusion – cfcoldfusion
  • C# – c-sharpcsharp
  • C++ – cppc
  • CSS – css
  • Dephi – delphipaspascal
  • Diff – diffpatch
  • Erlang – erlerlang
  • Groovy – groovy
  • JavaScript – jsjscriptjavascript
  • Java – java
  • Perl – perlpl
  • Plain Text – plaintext
  • PowerShell – pspowershell
  • Ruby – railsrorruby
  • Scala – scala
  • SQL – sql
  • Visual Basic – vbvbnet
  • XML – xmlxhtmlxslthtmlxhtml

If you want to add support for other languages, you’ll need to dive into the plugins’ innards and add some JavaScript files that knows how to colorize that code snippet. The SyntaxHighlighter Evolved plugin uses a JavaScript-based component (written by yet another person) that does the hard work and it’s this part that you need to tweak. You can refer to SyntaxHighlighter JavaScript package by Alex Gorbatchev on how to do this.

The Result

SyntaxHighlighter does a pretty good job at coloring my code snippets. It also adds line numbers, which may be convenient when you need to explain longer and more complicated code blocks.

SyntaxHighlighter Results

So that’s just about it for now, happy blogging!

 

Tags: , , , , , , ,

%d bloggers like this: