Optimize Your Blogging Workflow with Markdown and Marked

When I first started writing for Appstorm, I immediately grabbed a copy of MarsEdit, since I had read such great things (on AppStorm) and finally had a reason to use it. I know HTML, but I hate looking at all those tags when I’m writing, so I did most of my work in Rich Text mode, then switched it to HTML, and copied into WordPress. It wasn’t a bad workflow, but it wasn’t ideal. When I reviewed ByWord, I got hooked on the minimal writing environment, and searched for a way to integrate it into my workflow.

From ByWord documentation, I learned about the infinitely useful Markdown syntax, which I’d previously dismissed as something too geeky-sounding to try. Markdown is two things: a standardized plain-text writing syntax, and a tool for converting plain text into HTML. With limited knowledge of HTML, writers can type out content in a natural markup-free environment, then easily convert their text into properly encoded HTML. Marked is a lightweight, inexpensive app that lets you preview the HTML output of your document as you’re writing. In this article, I’m going to go over some of the basics of Markdown, and demonstrate how Marked can contribute to an efficient blogging workflow.

How Markdown Works

Writing in Markdown is easy: just type plain text, pretty much as you normally would, paying attention to a few simple conventions. For example, to create an h1 tag, you can add a line of equal signs beneath a heading, or preface it with a single number sign. To create unordered lists, you can just make bulleted lists using asterisks, dashes, or plus signs. The great thing about the Markdown syntax is that it’s very readable even before you convert the text to HTML.

Once you’ve finished writing your content, you can convert it to HTML using the web service dingus, or supported applications like Marked or ByWord.

Markdown on the left, HTML on the right

Markdown on the left, HTML on the right

Using Marked to Preview Markdown

Using Marked is simple: drag the file icon from the title bar of the editor you’re using to the Marked dock icon, and it opens a preview of your document. The Marked preview updates every time you save (or every time Lion autosaves). You can use one of the pre-installed themes, or create your own. Marked also gives you information about your document like word, character, and line count.

Previewing your markdown document

Previewing your markdown document

You can view the HTML source by clicking the magnifying glass button at the bottom of the window. If you’re using an editor that takes up much of your screen, you can set Marked “float” above all other windows.

Marked can also be used to preview and find out statistics from any text document, very useful for quickly getting a word count.


Marked also supports MultiMarkdown, which is like an extended version of Markdown, featuring support for more file formats, and advanced options for creating LaTeX documents. MultiMarkdown supports footnotes, citations, definition lists, document metadata, and more. MultiMarkdown was built to allow users to take advantage of the simple workflow of Markdown to create more than just web content.

To use MultiMarkdown on your computer, you normally have to open up the command line and worry about things like compiling, with Marked, you can ignore all the geeky bits of MultiMarkdown, and just take advantage of its functionality.

An Improved Blogging Workflow


When I’m writing content for the web, I switch back and forth between using ByWord and TextEdit (TextEdit has better Versions support), but Marked will work with pretty much any text editor. In my dedicated “writing” space, I have my text editor and Marked open side-by-side for easy previewing and to ensure my Markdown syntax is correct.


When I’m done writing, I usually use the “copy HTML” option from the gear menu in the bottom right corner of the Marked window, and paste right into WordPress. If you’re working with static HTML websites, you can just save your documnet as HTML.

My writing space

My writing space

Marked also gives you the option of creating a PDF from its Markdown-formatted output, I haven’t used this feature yet, but expect it to be really helpful, especially once I create my own themes. At work, I’m often asked to create help documentation in both HTML and PDF format, and I can see Marked saving me a lot of time on these tasks.

Room for Improvement

Marked is a hugely useful tool for me, but a have a couple small complaints. First, you can’t copy and paste selected lines of HTML, which seems pretty weird to me, because I often need to copy just part of a document. When you try to copy from the HTML view, you just get the generic “you can’t do that” sound and nothing is copied to your clipboard.

I also found Marked to be a bit unstable, it unexpectedly quits fairly frequently while I’m using it. This isn’t a fatal issue, however, as your document is just being previewed by Marked, not saved, so you don’t lose any data when it crashes. I’m hoping this is addressed in one of the next updates.


Discovering Markdown has saved me a lot of time and frustration while writing blog articles, and makes the overall experience much more pleasant. Marked makes my workflow that much smoother, allowing me to format as I type without dealing with dropdown menus and keyboard shortcuts, all while displaying what the final product will look like.

Marked has a couple issues, likely related to its youth, which I hope will be addressed soon. Even with these issues, at $2.99, Marked is absolutely worth the price. I’d be interested to hear about other blogging workflows out there!


Marked creates a preview window for your Markdown and MultiMarkdown documents, and allows you to copy and paste HTML, export to PDF, or print.