How to embed XML and source code in WordPressMU/WPMU using the SyntaxHighlighter plugin
December 14th, 2009 by Dan York
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…
Related posts:
- Tip: How to modify WordPress MU to allow embed objects (specifically for SlideShare)
- What is the best Twitter plugin for WordPress MU?
- Adding video comments to WPMU using Seesmic’s new plugin
- Adding (video) podcasting support to a WordPress MU (WPMU) installation
- Adding the “Unfiltered MU” plugin to WordPress MU to allow all embeds
Tags: Plugins, WordPress, wordpressmu, WPMU
Want to learn how Voxeo can help unlock your communications and deliver
a better customer experience?
Please contact us!
If you found this post interesting or helpful, please consider either
subscribing via RSS, becoming
a fan on Facebook, or
following us on Twitter.
RSS Feed
December 14th, 2009 at 12:19 pm
Interesting. One alternate method for posting code snippets in your blog (something I’ve been using more and more lately) is to create a Gist on GitHub – http://gist.github.com/
You can create a Gist in any one of several dozen languages (everything from ActionScript to YAML) and embed it into a blog. This method rocks especially hard because (taken from the GitHuib site): “all gists are git repositories, so they are automatically versioned, forkable and usable as a git repository.” Saves me a step from having to post code to my blog and then upload it to GitHub.
You can style the Gist content as well using the theme’s CSS file. Pretty easy.
Cheers!
December 14th, 2009 at 7:01 pm
MarsEdit is likely escaping your HTML entities so that it shows up as you paste/type it. However my plugin escapes anything between the shortcodes so that you don’t have to do it yourself. It doesn’t do this for TinyMCE (the rich editor WordPress uses) because TinyMCE escapes them similarly to MarsEdit, but unlikely TinyMCE I don’t think there’s any way to detect MarsEdit.
Perhaps I should assume that any content coming in from the XML-RPC interface is escaped…
December 14th, 2009 at 9:11 pm
Mark, thanks for the suggestion. Jason Goecke here at Voxeo Labs has been a huge of gists and uses them all the time, but I’ve not yet really had the time to play with it. I probably should, given how I’ve become quite a fan of git and since it would give me some reason to get back to using my Github account.
December 14th, 2009 at 9:27 pm
Alex/viper, many thanks for replying here. I checked the MarsEdit forums and found a reference to escaping HTML entities being configurable. I do have that “Encode with HTML entities” checkbox OFF, so I don’t think it is at the MarsEdit end. My experience to date has been that the HTML I see in MarsEdit is indeed what winds up in WPMU over XML-RPC, particularly now that I have the “unfiltered-mu” plugin running so that kses.php and friends don’t strip out unknown tags. In fact, this instance today with the character entities being escaped completely surprised me.
I checked all the other plugins and mu-plugins to see if there was any other plugin that might interfere, but I don’t see any. So I’m not sure what is going on here…
December 15th, 2009 at 8:05 pm
Hi Dan – MarsEdit does encode things like in a way that would cause them to look like they do above, but it’s the standard way of encoding “content” in the XML cargo that is sent to your blog. I.e. it’s nothing unusual and nothing has changed. It does seem like something going on in the WordPress side of things is causing that XML content to not to be “unescaped” when it comes out the other end.
Have you tried disabling all of your plugins just to see if it makes a difference?
Daniel