Markdown to HTML to WordPress automatically with Automator

As promised, today I’m writing about how to post Markdown text from your favorite text editor in OS X to WordPress automatically with just three keyboard shortcuts (you also have to write the title of the post and press one button in the process, but that makes it sound less awesome).

The idea to create this workflow came after I noticed my writing frequency increased after I purchased iA Writer, but the increase didn’t result in more blog posts here. Unfortunately the software alone didn’t make me write more. I made a daily writing goal and so far I’m mostly sticking to it, which explains the increase. iA Writer makes the process more enjoyable, however, which seems to be helping with the frequency to some degree.

Rightly or wrongly (time will tell) I figured if it was easier to get my words to WordPress I might end up posting more. The default WordPress editor presents a lesser of two evils scenario. The WYSIWYG editor is unreliable and writing HTML markup in the text area slows down the process. There are Markdown plugins, but you can only go the all-or-nothing route with them from what I’ve seen. iA Writer can export HTML, but then you have to copy, go to the browser, log in, paste, then post. It seemed feasible to go straight from Markdown to WordPress, so here we are.

It took quite a bit of tinkering and Googling to figure out this workflow. I’m mostly satisfied with the solution (more on that later) and I hope you find it useful as well. Let me know if you have any improvements or questions in the comments below.

Note that the images in this post were not published through the automated process. I’m confident that functionality can be added with a plugin like Postie. I will likely add it later so I can have better control over post categories/tags through the automated process as well, but that’s for another day.

The prerequisites

Here’s what you’ll need to set up the workflow:

That’s it!

The workflow

The workflow is simple:

  1. Write post in iA Writer (or your favorite text editor) with markdown. Don’t include the post title as we will write it later.
  2. Select the text (keyboard shortcut one)
  3. Convert the text from Markdown to HTML and copy it to the Clipboard (keyboard shortcut two)
  4. Initiate the post to WordPress automation (keyboard shortcut three)
  5. Write the title for the post and press the Continue button. I Tab twice then Enter so I don’t have to use the trackpad.
  6. Visit the blog to initiate the automated browser activation and check the post for errors

If you’re reading this I’m assuming you can take care of the first two steps without any direction.

Next we need to set up the service for Step 3. Markdown Service Tools comes with 30+ awesome Markdown-related services. The one we need is called md – Convert – HTML to Clipboard. As the name suggests, this takes highlighted Markdown and converts it to HTML, then sends it to the Clipboard. Open up the service (you might have to Control click to get passed the Unknown Developer warning) and choose Install when prompted. You should see something like this:

Convert Markdown to HTML

You can add a key binding to this by opening System Preferences > Keyboard then navigating to Keyboard Shortcuts at the top and Services in the left menu.

Convert Markdown to HTML shortcut

As you can see I use Command-Shift-H for this because it makes me think of HTML; and I don’t like trying to mash four buttons so the more logical Command-Shift-Option-C was out. When I hit the shortcut the selected text is converted to HTML and copied to the Clipboard. Step 3 complete!

Now that you have everything you need for Step 3 it’s time to get into the fun automation part. We’re going to accomplish this with one application and one service from Automator.

First let’s build the application that will do most of the heavy lifting. Create a new document in Automator and choose Application when prompted.

The left pane shows the library of various things you can use to build out your Automator applications or services. It’s quite extensive and useful, so use it to automate your other tasks! All you have to do is pull the actions you need over to the right pane to start building your application.

Remember, we already have our HTML copied to the Clipboard, so the first thing we need to do is get the contents of the Clipboard. Automator makes this super easy with Get Contents of Clipboard under the Utilities section.

Get Contents of Clipboard

Next, we need to create our new mail message. The action we’re looking for under Mail is called New Mail Message. Drag it under the first step and add your super duper secret email in the To field.

New Mail Message

I didn’t didn’t figure out a way to write the title in the text document and somehow transfer it to the subject line of the email (which is where WordPress gets the title for the post). If you know of a way to do grab the first line of the text and make it into the subject line let me know. Until then you have to make sure to check the “Show this action when the workflow runs” box under Options.

New Mail Message options

This option stops the flow so you can add a Subject to the message before it is sent out. You can also choose to only show the Subject field as I have. So now we have the email set up with a subject line so we can move on to adding the message content from the clipboard.

This step uses the Watch Me Do action, which can be found under Utilities. As you probably guessed, this allows you to record something you do and turn it into an action. In this case we will be pasting into Mail. I opened up a new mail message, then went to Automator and pressed the Record button at the top (note that you might have to set up accessibility options if prompted). Then I clicked over to mail and hit Command-V into the message area. Last I went back to Automator to stop recording and ended up with this:

Watch Me Do

I only need the Press Command-V event, so I deleted the first step. Now we have the the post text in the Message field and we’re ready to send the email to WordPress.

For this it’s another simple step, all we need is the Send Outgoing Messages action from Mail. It will send the message for us.

Send Outgoing Messages

You can stop here if you want, but I added another step to quit Mail because I don’t use it for email. I added a Run Applescript action with that adds a 10-second delay then quits the application.

on run {input, parameters}
delay 10--number is time in seconds
tell application "Mail"
quit
end tell
return input
end run

Run Applescript

You could also add a step to open up a browser window and visit your site to initiate the automated browser activation here if you wanted. I didn’t because I would have to wait for the delay for Mail to quit and I can just navigate to the browser quickly and load my site during the delay. If you want to automate this step I think you could accomplish it with Get Specified Text with your site’s address in the text area followed by the Display Webpages action.

Now you can save the application and add it to your Applications folder. I called mine PostToWordpress but you can call it whatever you want; just remember the name for the next step. We have to create a service so we can run the application with our last keyboard shortcut.

Create a new Automator document, this time a service instead of an application. We need the Launch Application action under Utilities. Choose your application name, save it, and create whatever shortcut you want in System Preferences.

Launch Application

That’s it! You should be set up to follow the steps above to post to WordPress directly from selected Markdown text. Remember, someone has to visit your site to tell WordPress to get the message and publish the post. Depending on the traffic of your site you could wait, or visit the site yourself to initiate the automated posting. I like to go to the site and refresh a couple of times to see the post, then read through it to check for errors.

A note on images

I’ve already mentioned Postie, but I wanted to outline the process I used to insert the images in this post. It still uses Markdown and all the writing is still in iA Writer.

First I gathered all the screenshots and sized them appropriately. Then I uploaded them all into WordPress and copied the URLs to insert into my text document. I use [Jumpcut] (http://jumpcut.sourceforge.net/) for clipboard buffering so I just did it all at once. Then I added the appropriate Markdown image syntax to insert the images where they needed to be. Once the post was uploaded the image links were already pointing to the right files, so they worked!

I hope you find this workflow useful. Let me know if you have any improvements or questions in the comments section. Happy automated posting!

5 thoughts on “Markdown to HTML to WordPress automatically with Automator

  1. Oh my goodness! Impressive article dude! Thank you so much,
    However I am having problems with your RSS. I don’t know the reason why
    I am unable to join it. Is there anybody getting identical RSS issues?
    Anyone who knows the answer will you kindly respond?
    Thanks!!

  2. Greetings I am so thrilled I found your website, I really found you by accident, while I was browsing on Yahoo
    for something else, Regardless I am here now and would just like to
    say thanks a lot for a tremendous post and a all
    round entertaining blog (I also love the theme/design), I don’t
    have time to read it all at the minute but I have book-marked it and also included your RSS feeds, so when I have time I
    will be back to read more, Please do keep up the fantastic b.

  3. I’m impressed, I must say. Rarely do I come across a blog that’s both educative and amusing, and let me tell you, you have hit the nail on the head.
    The issue is something too few people are speaking intelligently about.
    I’m very happy that I found this in my hunt for something concerning this.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>