Blog Better with Markdown

Create richly formatted content without typing a single line of HTML

The iPad’s a great text-editing platform, but when it comes to applying complex formatting, changing styles, and editing HTML code, things start to get a bit too complicated for the tablet. Even with an external keyboard attached, which gives easier access to the chevrons and digits used in HTML, you still spend more time than you should reaching forward to tap the screen to add a non-standard character.

Fortunately, there’s a better way. Markdown lets you apply complex formatting using common characters like [, ], tt, -, and *. Once exported, they’re converted to HTML or Rich Text Format (RTF). Not only do they save you the chore of learning a new way of working, they’re also entered with a single tap of the keyboard, leaving you free to carry on typing unimpeded.

1.Choose Your Weapon

In this tutorial, we’re using Drafts ($3.99) to write blog posts. Even if you don’t have an external keyboard with a full set of characters, Drafts lets you quickly access the most common Markdown characters using the additional row above the QWERTY line, without switching to another layout. It also has a Markdown preview that shows how your syntax converts. Another good editor is ByWord ($4.99), which also has dedicated Markdown buttons on a separate top row and a similar layout preview mode.

2. Handling Headings

Search engines like Google use headings to navigate and index your site. Use the <h1> style (denoted in Markdown by a single tt) for your site title whenever possible; when writing your blog post use ## for a second-level heading (<h2>) for the title of your post, and tttttt to format any crossheads within the post itself using the <h3> style. Your blog template should have styles for each of these set up so visitors can find their way through lengthy posts written using Markdown.

3. Perfect Paragraphs

Start typing. Don’t think about the formatting. Just use a double return to start a new paragraph, and once converted, your Markdown tool inserts the <p> code. Use *an asterisk* or_an underscore_ on either side of a block of text you want to emphasize with italics; use **double asterisks** for those parts that should be set in bolder type. You can **combine them for _ important^ blocks of text** by using one inside the other. Working this way lets you enter text without interruptions.

4. Image is Everything

To include an image, use the syntax ![alt text](image location). If we were positioning the MacLife logo, stored at /images/mllogo.png, we would enter ![MacLife](http://www.maclife.com/images/mllogo.png). Unfortunately you’re unable to specify the size of the image, but if you know how the regular <img> tag works, you can use it and Markdown won’t interfere. We’d therefore enter <img src=»http://www.maclife.com/images/ mllogo.png» width=»150″ height=»100″>

5. Convert and Export

Unless you’ve installed a Markdown-friendly plug-in for your blogging app, such as WP-Markdown (free from http://bit.ly/11JAzH7), which adds native support to self-hosted WordPress blogs, you need to convert your post to HTML. In Drafts, tap the share button (top right) and select Markdown: Copy to Clipboard. In ByWord, tap the cog and select Copy HTML. Both apps also let you export to the body of an email, while Drafts also lets you send it to an external app like Evernote or Twitter, or save it to Dropbox.

6. Paste and Publish

Copying the Markdown (in Drafts) or HTML (in ByWord) to the clipboard performs a background conversion from the simple syntax characters you used to a fully coded-up block of HTML text. You could publish it as a standalone page, but as it’s missing the various headers and niceties of a properly constructed document it should have a bit more work first. But it’s perfect for posting into the HTML view of a blog engine like WordPress. Click publish, then preview your site to see your syntax fully styled up.

Like this post? Please share to your friends: