Markdown and Syntax Highlighting in WordPress

I’ve been having a look at the various ways to post in WordPress, and it comes with a default choice of visual editor or ‘text’ editor – namely HTML.

Now the visual editor seems to be quite limited, and it’s slow to do some things like create lists and change formatting. The text editor, on the other hand, is very capable with full support for HTML (not sure which version). I’m very familiar with this, but I somehow don’t think it’s what I want to be posting in – a bit lengthy to write out `<strong>` for every bold bit of text, and so on.

Anyway I had a look around and one nice-looking option, which I’ve come across briefly before but not really used much, is Markdown. It’s basically a simplified way of marking formatting into the text, with shortcodes to replace most simple HTML elements.

For instance, rather than writing `<strong>text</strong>` to yield bold text, one can just type `**text**` for the same effect.

I haven’t quite chosen how to implement this though: the best plugin seemed to be JetPack, a toolkit for WordPress sites made by (and connected to) WordPress.com, the commercial wing of WordPress. However this relies on a file called ‘xmlrpc.php’ in the root folder of WordPress, which my hosting provider blocks access to. I had a look, but there aren’t any work-arounds at the moment.

The main alternative is WP-Markdown, a standalone plugin that replaces the visual and text editors with a simple Markdown editor. I think it’s what I’ll use, but for now I’m writing in HTML as I have some other things to sort out first.

Since a lot of what I write includes code, I need to have a quick and simple way of embedding code snippets in my posts, with syntax highlighting (so that different types of text are coloured differently, depending on the language, for ease of reading).

The best thing I could find is a plugin called Crayon Syntax Highlighter that scans your HTML for any `<pre>` tags and displays anything within as a code block. There are lots of themes of code to choose from, and options like language, font, line numbers, title etc. that can be modified globally, as well as specified as an attribute to the `<pre>` tags.

Additionally, the plugin adds a dialog box that can be opened when composing, with all of these options available to be altered for the specific case: this was evidently designed to be used with the visual editor but nevertheless it will prove useful I’m sure.

Here’s an example of a block of arduino code made using the plugin:

void interruptYawRise() {
  enableInterrupt(RCYAW, interruptYawFall, FALLING);
  yawStart = micros();
}

There is also support for inline code snippets (as I’ve been using in this post). These don’t (as far as I’m currently aware) support syntax highlighting dependent on the language, but are still extremely helpful.

I will be using this to embed code from now on, and will probably activate WP-Markdown soon depending on whether it is fully compatible or not with the syntax highlighting.

Leave a Reply

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