Marked excels at previewing Markdown and HTML documents
By Dan Frakes
At a glance
Here at Macworld, we’re big fans of Markdown, a nifty markup language that lets you write for the Web using plain text and a simple formatting syntax. In fact, many of the articles you read here on Macworld.com were written using Markdown and later converted to XHTML for publication. Why do we like it? It’s easy to write in Markdown; it’s easy to read the code (especially if you use one of the many text editors that include Markdown syntax highlighting); and because Markdown files are plain text, you can use any text editor or word processor, on any platform.
But the topic of today’s Mac Gems review isn’t Markdown. Rather, it’s Marked (Mac App Store link), a standout utility that provides live previews of Markdown-formatted files—in other words, it shows you what such files will look like when converted to HTML or XHTML. (Marked also supports text, HTML, and MultiMarkdown files. MultiMarkdown is an extension of Markdown that offers more-complex formatting and additional output/export formats.) Suffice it to say that if you don’t use Markdown, or if you aren’t at least interested in it, today’s Gem isn’t for you; I’ll see you on Friday. If you are a Markdown user, or if the first couple paragraphs here have piqued your interest, read on.
Drag any Markdown-formatted document (or, again, a text, HTML, or MultiMarkdown document) onto the Marked icon in the Finder or the Dock, and Marked opens a window showing a preview of what that document will look like when rendered in HTML. Regardless of which app you’re using to edit that document, whenever you save changes, Marked automatically updates its preview to reflect those changes.
So far, Marked probably doesn’t sound much different than the built-in Markdown-preview feature of a growing number of Markdown-enabled OS X text editors, such as BBEdit and iA Writer. But Marked’s previews are much more flexible and customizable, and Marked provides a number of writing-focused tools for analyzing your documents and for exporting their content.
For example, Marked offers several preview styles, including an attractive multi-column view, and you can add your own CSS templates. (I use a template that mimics the Macworld website so I can see how an article will look once I import it into our content-management system and publish it on the site.) You can quickly switch between preview styles—say, the standard and mobile versions of your website—using keyboard shortcuts. You can also easily make your preview text larger or smaller, or invert the preview’s colors.
Each Marked window can behave as a normal window or float above all other windows, and you can configure Marked to make its preview windows partially transparent whenever they’re not the active (frontmost) window.
If your document has section headers (h2 through h6), a button at the bottom of the Marked window shows a hierarchical list of those sections, letting you quickly jump to any part of the document; Marked momentarily highlights the chosen header. You can also add up to nine arbitrary bookmarks anywhere in the document by placing the cursor at a desired location and pressing Shift-# (where # is a number from 1 to 9); you can jump to a bookmark by pressing just the bookmark number (1 to 9), and you can progress through bookmarks using the N (next) and P (previous) keys. (Forget a keyboard shortcut? Just press H—for help—and a convenient overlay displays Marked’s document-navigation shortcuts.) While previewing your document, you can use the Find command to locate particular words and phrases in the text.
While previewing a file, Marked provides a number of useful statistics. For example, the document’s word count is displayed at the bottom of the window; click the word count to show the line, word, and character counts. These counts are updated in real time, and they helpfully omit formatting characters. Select a block of text in the preview, and a popover displays the same three metrics, but for just the selected text. The Readability Statistics option shows you Reading Ease and Grade Level (based on the Flesch-Kincaid readability test) and Fog Index scores.
Marked also offers a unique Visualize Word Repetition feature that shows your document with repeated words in bold; you choose whether Marked looks for repetition at the paragraph or document level. Move the pointer over a bolded word, and all other instances of that word are highlighted; click a bold word for a higher-contrast view that dims the entire document except for instances of that word. It’s a great tool for avoiding repetition in your writing.
At any time, you can click the HTML button at the bottom of the Marked window to view the HTML source code that corresponds to your Markdown text and formatting.
When you’re done writing, Marked makes it easy to export or convert your Markdown to other formats. Pressing Shift-Command-C (or choosing Copy HTML from Marked’s action or menu-bar menu) copies the document’s generated HTML code to the clipboard for pasting elsewhere—for example, into your blogging software or content-management system. You can also copy part or all of the preview view to paste the rendered text into any rich-text document or email message.
Alternatively, you can save the document’s rendered HTML code to a new HTML document—with or without your chosen preview style included—or save the rendered preview to a formatted RTF file. Finally, you can print the preview version of the document, or you can save it as a rendered PDF without the hassle of going through OS X’s printing dialog box. (Marked uses the chosen preview style for printing and PDF saving.)
As noted above, Marked also supports MultiMarkdown (including math syntax), and screenplay writers may be interested in Screenplay Markdown and using that syntax in Marked. You can also use Marked with other Markdown processors—or even non-Markdown syntax processors—by adding them in Marked’s preferences dialog. (The program also offers a number of advanced options that determine how code is processed.) And while Marked’s AppleScript dictionary is relatively basic, it allows you to integrate Marked into an automated workflow—or, in my case, to create an Open In Marked script that opens the current BBEdit document in Marked using a keyboard shortcut.
When I first saw Marked, I questioned the need for it, given that my favorite text editor, BBEdit, offered its own preview feature. But after using Marked for a few months, I’m a convert. It’s so much better than the built-in preview feature of most Markdown-focused writing apps that it’s worth running in addition to those apps. And because it’s not tied to any particular text editor, you can take advantage of Marked’s features regardless of which editor—or editors—you choose to use.