Displaying Source Code in WordPress

I needed to post some source code on WordPress. I had no idea how painful this would be. There’s a number of plugins that are supposed to handle this, but that canonical source code plugin doesn’t seem to exist. The one that seemed to fit my needs best was Code Viewer because of the following features:

  • lets you maintain source code in a external files, only maintaining references to the files in the editor
  • automatically includes download link to the external files
  • line numbering

A guy called AJ added scrollable text areas and the capability to select which lines to display like this: 1,3-7,15 in updated versions. Both versions have at least two disadvantages I’ve stumbled across:

  • they can’t be used with the WYSISWIG Editor, because the built-in tinyMCE editor really goes out of it’s way to make sure it screws up anything remotely resembling source code.
  • they require their own CSS styles that can either be included from the header template or appended to the end of the default.css stylesheet. Both options require editing „default“ files, which I think is bad style.

A third guy called Håkan Carlström tries to address these issues, but unfortunately, I wasn’t able to get his version of the plugin code to work at all.

I looked at the different versions and but together my own melange. Caveat: I have no idea what license any of the three release the code under, but I’ll get back to you on that…

The reason why the first two versions don’t work in the WYSIWYG editor, is because they rely on xml tags like this:

brackets.png

and the WYSIWYG editor just can’t cope with unfamiliar tags. The editor will also consistantly screw up the string:

src=

but that’s another story. Håkan version of the plugin tries to avoid the angled brackets by using square brackets like this:

carlstrom.png
a tad too verbose for my taste. A nice feature of his plugin is the capability to dynamically link in the necessary style sheet. Too bad I can’t get it to work…

So here’s my version. It can be used from within the WYSIWYG editor because it uses source as the attribute name instead of src and square brackets like this:

syntax.png

So anyway, this is what you end up getting:

[viewcode source=“arg.src“ scroll=“yes“]

Yes, it’s true, I spent the larger part of the afternoon sifting through *argh* php code. And now this. So: DO NOT USE THIS PLUGIN WITH PHP CODE!

What else didn’t I get working? Glad you asked: including a link to the Coder Viewer stylesheet doesn’t work, because of an unseen entity from deep within WordPress that filters out link tags.

That being said, you can download the semi-functional plugin here.

So here’s the css with some modifications I’ve made, you’ll need to botch these styles into some other stylesheet you’re already including or include it seperately in the header:

[viewcode source=“code-viewer.css“ link=“yes“ scroll=“yes“]

Included on this page using the actual Code-View plugin!!

So if there’s anything I learned from this experience is that while I already disliked php for having $variables and unecessary semicolons, I had no idea how bad it really sucks:

php.jpg

1 Kommentar zu „Displaying Source Code in WordPress“

  1. Please try my updated version on http://www.familjencarlstrom.se/WordPress/2006/08/17/code-viewer/

    Hopefully you can get it to work. It also has GeShi-highlighting support now.

    /Håkan C