I posted a video a few weeks ago of a plugin I was working on to manage HTML demos in WordPress. I’m publishing the code now as version 0.1 — meaning it works, you should feel safe about using it, but it’s not finished. For example, I just realized that the only Javascript library you can include on your page is jQuery.
I think it would be cool to be able to have options to do some post-processing. So, maybe Markdown and HAML for HTML. Obviously SASS and Less for CSS — maybe Stylus? CoffeeScript for Javascript would be nice.
One other thing that I think would be really awesome is if you could associate a demo to a post somehow. Then I could add some extra template tags like the_demo_link(), which would automatically grab the link to the demo for that post. Or maybe another tag that would automatically grab the link for the associated post? Anyway there’s a lot we can do with this.
It’s on Github. I’d love to take pull requests, or any bug reports filed through the issues tracker.
Background
Lots of web people have some way of hosting demos on their site. The one I always think of is CSS-Tricks, but there are many others. I’ve actually done it in the past on my site, but no matter how easy I made it for myself, it was always too hard so I just never used it. But that’s dumb because I publish everything else around here with WordPress and WordPress is really good at keeping track of stuff like this. So I decided to create a custom post type for HTML demos inside WordPress.
Customization
The plugin is actually smart enough to insert the HTML after the_content(), which is cool. The styles and scripts are enqueued into the header through external files that the plugin also generates. Bottom line, this should work out of the box with any theme.
If you want to customize how your demos look though, it’s pretty easy. Just add a single-html_demos.php file to your theme and WordPress will use that to generate those pages. So, just like you would customize any other template, you can customize the template for your demos.