I love ScreenSteps, the app from Blue Mango which makes creating documentation for screen-based applications as fast and easy as making documentation can possibly be. It’s a little clunky sometimes, but the features outweigh the cons by far, at least for me.

In recent versions they’ve added the ability to post directly to WordPress, which has been pretty cool. I always got a little frustrated with the amount of extra markup included in the templates, though. Today I asked them if they could add a Markdown export feature. Their response? It’s already there.

It doesn’t process Markdown to HTML, but that’s great for me as I do that server-side. It uploads the images in your lesson, inserts the resulting urls in your page, and uploads the plain old Markdown straight to your blog as either a post or a page. I re-created a couple of my older how-to’s using this new template, and they came out great. Check them out in the new How-To section.

Creating the template is quite simple, and everything you need to know is detailed in Blue Mango’s help system. I’m not going to go into a lot of detail, but here’s a copy of the template I’m using. Just unzip the file into ~/Library/Application Support/ScreenSteps/2.0/Templates/HTML/Blog and edit the index.html file inside.

Here’s where I went a little crazy. I have a custom post type in WordPress for the How-To’s, and I have plans to expand that section over time. I can’t post directly to WordPress as a How-To, and it was a little annoying to post it as a page and copy it over just to get the images uploaded. So… here’s a service called Upload Images to Blog. You can export as HTML in ScreenSteps using the above template and save it to a local folder. Run the service on the html file created, and it will upload all of the images to your blog and create a new filename-out.html file with the new image urls. You can render that to HTML or paste the Markdown directly to your post page, if your blog supports that.

The service requires a configuration file to be located at ~/.imguploader. The content of the file is just one line, like this:

username:password@http://yourblogname.com/xmlrpc.php

It also requires that you’re using an image output format like the one found in the template above. It just scans the file for ![](filename.jpg "alt text") lines for the uploadable images. I can’t guarantee the service will work for everybody. It’s a quick and dirty solution, but it works really well for me. It even has Growl notifications, if you have Growl installed.

That’s it. Back to work on more serious things.