How to embed XML and source code in WordPressMU/WPMU using the SyntaxHighlighter plugin
Monday, December 14th, 2009
Way back in late 2007 when I launched blogs.voxeo.com, one of my very first problems was in trying to figure out how to include snippets of VoiceXML, CCXML and CallXML code. I wrote about trying a number of different WordPress plugins back in March 2008 and at the time didn’t have much luck. When we have been including source code in blog posts, it has admittedly been using the über-kludgey way of converting all the XML tag syntax into HTML character entities, inserting non-breaking spaces, etc. A serious kludge.
Over the weekend I saw the recent post on the WordPress.com blog about posting source code which pointed me to the excellent “SyntaxHighlighter Evolved” plugin from “Alex / Viper007Bond” (view his plugin page) that is in turned based on the JavaScript SyntaxHighlighter package from Alex Gorbatchev. I installed it in WordPress MU, tested it out on an experimental blog I use for testing and then activated it sitewide.
Now, when I simply bracket VoiceXML code with “[ xml ]” and “[ /xml ]” (without the spaces), it comes out looking great. Here is an example:
<?xml version="1.0" encoding="UTF-8"?>
<vxml version = "2.1" >
<form>
<block>
<prompt>
Hello World. This is my first telephone application.
</prompt>
</block>
</form>
</vxml>
It is, of course, not limited to merely XML. There are 20+ languages listed on the SyntaxHighlighter ’syntax files’ page. I expect that we’ll be using it now to be able to better write about the Tropo.com languages over on the Tropo blog.
One aspect I quite like about the plugin is the menu you get when you move your mouse over the source code. As shown in the image to right, you can easily:
- view the source code in a pop-up window
- copy the code to your clipboard
- print the code
Given that we’re planning to make more tutorials available, having the ability to copy and paste the code easily directly from the blog post is a great feature.
Many kudos to the two Alex’s for making both the underlying JavaScript library and also the WordPress plugin. And if you run a WordPress or WordPress MU site, you can download the SyntaxHighlighter plugin and install it in your site, too.
P.S. I should in fairness point out that a couple of colleagues have mentioned SyntaxHighlighter to me over the past few months… I just never had a chance to check it out until now.
UPDATE #1, a few minutes after posting: So it seems I still need to work out a kink in my own process. I almost always write my posts offline using the MarsEdit editor and then publish them to the blogs.voxeo.com site. However, when I did that with this post, I wound up with code that had tags escaped as HTML character entities:
I had to go back into the WPMU editor on the website and paste in the correct VoiceXML code.
I’m not sure if the issue is with MarsEdit, my WPMU config or the SyntaxHighlighter plugin… but obviously I can’t really write posts with code in them offline until I figure it out…
If you found this post interesting or helpful, please consider either subscribing via RSS, becoming a fan on Facebook, or following us on Twitter.
I am experiencing a truly bizarre issue here on 
RSS Feed
