Posting Source Code in Wordpress

1 minute read

This one is pretty much a no-brainer, but I wasn't aware of it until very recently so I thought I'd share.

Source code, as you've probably seen on lots of web pages, is treated special. And for good reasons, like readability, syntax highlighting, and to protect against the use of formatted instead of plain-text characters.

When I first started using my Wordpress site, I just used the <code> HTML tag. Which is fine. But there is no syntax highlighting, which makes reading code a little more painful. I stumbled on the Syntax Highlighter plugin which does a great job and covers many languages, but alas - I'm hosted on Wordpress.com and am restricted from adding my own plugins.

But wait - what's this? Wordpress.com has integrated Alex Gorbatchev's Syntax Highlighter into their instances! So all I need to do is switch from the <code> tag to the [sourcecode language="language"] tag! Boom, syntax highlighting in my Wordpress posts.

Here's a quick example of what the syntax highlighting looks like for HTML, just for kicks:

Note The snippet below was supposed to demonstrate the WordPress syntax plugin, but this site is now hosted on Jekyll. Do not expect the result below to resemble WordPress’s syntax highlighting.

<html>
<head>
<title>This is my web page title - notice it is not highlighted by the syntax highlighter, but the tags are</title>
</head>
<body>
Awesome.
</body>
</html>

This was a game changer for me, to the point that I've been editing my old posts to use this new tag so I can offer syntax highlighting to my readers.

To see a full list of the supported languages, check out the official Wordpress post about posting source code.

Update: I got burned by the WordPress auto-save feature, so this post might not have rendered correctly before. Working now!
Update of the update: It wasn't the auto-save that burned me, it was the sourcecode tag. It has a nasty tendency to convert symbols into their ascii codes (like "&gt" instead of ">"). Real inconvenience, sort of ruins all of the benefits of the syntax highlighting and the like. Anyway, just be aware when you are using it.

Leave a Comment