Though it may not look like it, I’ve actually been working on this site off and on for six months. I’ve got a new design I’ve put together, and some pretty neat things I’d like to do. One of the things I want for the new iteration is significantly better presentation of the code snippets I post. At a bare minimum, I want decent syntax highlighting. Line numbering would be nice, and some way to download the code, or perhaps copy it to the clipboard.
To this end, I started looking at syntax highlighting plugins for WordPress. I tried out Code Colorer, and was extremely disappointed. Not with it’s appearance, but with it’s semantics.
In HTML, there are a few ways to present code. One of thse is the <code> tag, which is an inline element for variables and code snippets within a sentence. For blocks of code, <pre> is your best bet, since you don’t have to go around putting <br>s at the end of every line.
Code Colorer ignores this. With CC enabled, <code> elements become blocks of code. Meanwhile, <pre> elements are completely ignored. The final option is a BBcode-style [cc][/cc] block.
So it’s not – and can’t be – a drop-in. You’d need to go back and significantly change every post to work with it’s semantics.
The other problem is how you specify the highlighter to apply. This is done with the lang attribute: <code lang="php">. Unfortunately, the lang attribute already exists, and it’s for specifying the human text is written in, not the programming language to highlight it as.
It’s unfortunate, since it produces very attractive results. But when you ignore the meanings of things as it does, it’s just not going to work out. Sorry, Code Color: It’s not me, it’s you.
Discussion