Home > How-to Guides > Posting Source Code in WordPress

Posting Source Code in WordPress

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> 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:

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

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 “>” 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.

Categories: How-to Guides Tags: ,
  1. No comments yet.
  1. No trackbacks yet.

Care to share your two cents?

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: