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.

MultiMarkdown

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

Writing

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.

Exporting

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.

Conclusion

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!


Summary

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

9
  • Hendrik

    Very interesting program! I don’t blog (yet?), but i can see uses for Markdown and Marked in particular in every day word processing, too. I myself find it time consuming to even work with Pages’ templates, so I guess with this, you could just create a theme for documents – yes, this would take some time, but creating a Pages template would, too – type it up and save it as PDF with Marked. I could see this as being great for sharing documents that have the same style all the time.
    Yes, I’m not a writer either, and there may be programs that do exactly what I just described automatically, but this just popped into my head while reading this. (If there is a program that does this, please share, though;-))

    So, Tessa, I see you’re using both Cloud.app and Droplr – may I ask why? And, no, this is no “duh, they do the same thing” kind of comment – I was wondering, if you have different uses for either. Thanks!

    • http://tessathornton.com Tessa Thornton

      cloud.app has an upload limit if 10 items per day, but I prefer it. I use droplr for anything in excess of 10 items.

  • http://theclickstarter.com David Wang

    I’m a big fan of Markdown too and have been using it to write my blog posts for years. However I prefer a text editor with built-in syntax highlighting. Textedit is great but with Textmate or BBEdit I can see headings, links, lists, etc highlighted in a different color from the rest of the blog post. Of course, both those apps that I mentioned cost 10-15 times what Marked costs… and exporting is a little less elegant that Marked’s copy as HTML feature.

    • http://www.liewcf.com LiewCF

      David, can Textmate or BBEdit export Markdown text to HTML?

      • http://theclickstarter.com David Wang

        Hi Liew, yes BBEdit can convert Markdown to HTML, but you need to install the Markdown.pl script as a text filter. Alternatively you can copy the content from the preview window and paste directly into the WordPress Visual Editor and it will include the basic HTML markup (h1, h2, anchor links, strong, etc).

        I don’t feel good about recommending Textmate to new users now (though I love it) because the developer seems to have neglected it for a long time..

  • Hazza

    I don’t get it. Byword has Markdown HTML preview. The latest version does have Versions support. Why would you want to run Textedit side-by-side with Marked if you’ve also got Byword?

    • http://tessathornton.com Tessa Thornton

      TextEdit has better Versions/AutoSave support (so far).

      • Hazza

        How so? Do you have 1.3.1?

  • Hazza

    Byword also has Multimarkdown HTML preview, and HTML exporting.

  • Gary

    Doesn’t MarsEdit support Markdown?

  • http://tessathornton.com Tessa Thornton

    In case anyone is wondering why I use TextEdit instead of *App X*, it’s because TextEdit currently has the best support for Versions and AutoSave. Most apps haven’t integrated it yet, and it’s buggy in ByWord. I’m very impulsive with my deletions and edits, so Versions has become an essential part of my workflow.

  • Nate

    This is just an issue with your copy, but the application’s name is Byword, not ByWord.

    So far as my own blogging workflow, I’m fortunate enough for Squarespace to have built-in support for Markdown. That way, I write in whatever app I feel like at the time–be it Byword, Writer, or MarsEdit–and posts are properly formatted when they’re pushed to the site (almost always by MarsEdit).

    The nice thing about Markdown support is that it’ll also accept inline HTML; for anything with footnotes I’ll use Byword and copy/paste the HTML it produces. This is also handy when I’m using MarsEdit’s ‘Quick Link’ feature; I just hit the bookmarklet when I come across something interesting, and BAM, I’m ready to go.

  • Doug

    The current beta version of Marked fixes the crash issues & has been working great for me. Also, no idea what you mean about not being able to copy portions of HTML. When I select portions of HTML in HTML view, I am given the option of copying.

    Being able to print to PDF is great. Using Marked with iA Writer/Byword, I rarely open Word anymore.

  • http://www.learningjquery.com/ Karl Swedberg

    nvAlt (http://brettterpstra.com/project/nvalt/), a fork of Notational Velocity, is a nice free alternative. It has great MultiMarkdown support, live preview, view html source, “Edit with…[YOUR TEXT EDITOR]” support, and more. It also syncs with SimpleNote for the iPhone. No versions support that I know of, but its host of other features make it my go-to app for anything from simple note taking to long blog posts.

    • http://brettterpstra.com Brett Terpstra

      You know they’re both by the same person, right? :)

      • http://www.learningjquery.com/ Karl Swedberg

        Oh, ha! No, I had no idea. Great work, Brett! I love nvAlt.

  • http://www.asianefficiency.com Thanh Pham

    I actually prefer using Scrivener with Markdown. Works great for me, especially since I tend to do a lot of research for my blog posts which can be stored within Scrivener. Then all you have to do is export the file into HTML and you can use that in WordPress. I doesn’t have a live preview (would be nice) but otherwise it’s excellent.

  • http://brettterpstra.com Brett Terpstra

    Thanks for the review, and I’m really glad Marked is useful for you!

    Marked 1.2 is in review with Apple right now, and it fixes all of the “Room for improvement” issues listed. More stable, copy/paste enabled everywhere, styling tweaks, MultiMarkdown v3 embedded… lots of great new stuff on the way!

  • http://twitter.com/tiagobutzke Tiago Butzke

    This weekend I had some personal problems and whenever I feel like this, I feel like writing software.
    He had no head to write complex code Then i have decided to take a markdown editor. :)

    It’s simple but has preview.

    Who wants to take a look: http://www.tiagobutzke.com/markdown

  • Pingback: Markdown – kurze Vorstellung und meine Verwendung dafür | senäh

  • Pingback: 100 Mac Apps To Rule Them All | Design City

  • Kerry Dawson

    I use Byword for writing and its excellent. I just export the HTML to the clipboard and paste it into WordPress and there’s a nicely formatted document that was easily written in the clutter free environment of Byword.

    I’ve run into a problem I hadn’t had to think about though and that is I want to write a post that will include two or three png image files. There appears to be no way to port that out to WordPress.

    So I looked at an application I’ve had for years that is a blogging tool and that’s MacJournal. You can paste your PNG file into your document as you write and it will automatically post that blog to WordPress with all the formatting and images in place. This is actually very simple whereas I can’t figure out for the life of me how you would do that simply in Byword. I don’t want to give up Byword but I can see some more of my posts requiring images.

    Does anyone know how this is done with a Markdown editor like Byword.

    Thanks

theatre-aglow
theatre-aglow
theatre-aglow
theatre-aglow