12 Oct 2012 - Münster (by James)

Why you will fall in love with Markdown

We here at fruux are all in love with Markdown, and it's really easy to see why. It's such a simple way of writing and formatting text without having to mess around with annoying keyboard shortcuts and text layout. Markdown lets you concentrate on the writing in hand, not how it looks on the page, and it's really easy to use. In this guide, I'm going to be showing you just how to use it and some great applications that can make your Markdown writing experience a whole lot easier.

Who's behind it?

Two guys called John Gruber and Aaron Swartz. Never heard of them? Well, John is the brainchild behind Daring Fireball, which provides mainly Apple news in a bitesize, easy-to-read format. Aaron co-ordinated the RSS specification, which makes grabbing news feeds from the internet and viewing them a lot easier. You'll notice that some of the Markdown commands are taken straight from the days of plain text e-mail when you had to highlight something.

Why's it so great?

As I mentioned above, Markdown lets you simply concentrating on the writing in hand, and you don't have to waste time with keyboard shortcuts and clicking around if you want to format your text. It's also a lot simpler than HTML. Let's say, for example, you want to make some text bold. In HTML, you would have to type the following:

<strong> This text in bold </strong>

Sure, it's manageable, but try typing <strong> </strong> several times in a row and you start to get sick of it. In Markdown, the same command to make text bold is:

** This text in bold **

How much simpler is that? No silly tags and no searching around for the < and > keys on your keyboard. Just a straight set of simple keyboard shortcuts helps you format text however you want to. Let's have a look at the commands in a bit more detail.

Markdown Commands

Markdown takes a bit of getting used to but once you've learnt the basics you're all set. Here's how.

Headings

Forget those <h1> tags in HTML – headings in Markdown are a lot simpler. Simply use the # tag – the number of hashs corresponds to the level of the heading. So:

  • A <h1> heading in HTML would correspond to # Heading 1.
  • A <h2> heading in HTML would correspond to ## Heading 2.
  • A <h3> heading in HTML would correspond to ### Heading 3.

I'm sure you get the picture. Markdown, like HTML, supports six levels of headings, though by the time you get down to ###### Heading 6, it's no longer a heading any more…

Here is the complete set of headings in Markdown:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lists

Lists are really nice and simple. You don't have to worry about the <ol> (for an ordered list, so 1, 2, 3 and so on) or <ul> tags (for an unordered list with bullet points), Markdown supports both and in a much simpler way.

To write an unordered list, simply start each list item with an asterisk * and a space afterwards. Therefore

* List item 1
* List item 2

will turn out as

  • List item 1
  • List item 2

Ordered lists can be done by simply placing the number and a space. So

1. List item 1
2. List item 2

will be rendered as

  1. List item 1
  2. List item 2

Like the unordered list, you also get the indent as well to make your list neater and easier to see.

Emphasis

We've already touched briefly on how to make text bold above, however there are a couple of ways to emphasise your text.

To put your text into italics you can type either of the following:

_This text in italics_
*This text in italics*

Both will produce the same result. For bold, you can either write:

__This text in bold__
**This text in bold**

You can therefore use both methods – each one will produce exactly the same result.

Hyperlinks

Hyperlinks are a real pain in HTML, so much so that I either avoid them completely or use a code editor to put the links in. But in Markdown, they are a lot simpler. To create one, simply use the following example:

[link text here](link address here)

Put your link text between the [ and ] square brackets, and the actual address between the ( and ) brackets. Markdown will render this as link text here (though don't try clicking on the link – it won't take you anywhere!)

Block quotes

Markdown also supports block quotes, and to make one simply type the following:

> "This is your block quote here"

This renders as:

"This is your block quote here"

Your block quote will automatically be wrapped into the same block quote, so you can write as much as you want without having to worry about formatting.

Working with code

Code is a special case as if you are using Markdown to create a tutorial for something, then it is essential that you highlight the code. Also, if you are writing a tutorial on, oh I don't know, Markdown, then you want your code to remain in its raw format without being rendered along with the rest of the page.

To work with code, simply add it between two backticks (`). If you are writing multiple lines of code, then the backtick method doesn't work, as all your code will be on one line. Do not fear, there is a solution! Simply indent each line of code with four (4) spaces:

BaseObject = {
super   = nil,
name    = "Object",
new     =

Your code will be formatted in monospace font so that it is a lot easier to see.

Sounds great!

We know it does. Markdown is now slowly becoming a much more popular way of writing on the Internet, and has already found a home at GitHub and Reddit. Of course, it won't replace HTML in some aspects, but if you're going to be designing a simple website then it can really streamline your workflow.

So, if you've never used Markdown before, you're probably wondering how to get started! Well, there are a number of apps available out there that support writing in Markdown – for all platforms. Here are my top 10 picks:

1. Mou

Mou is currently my favourite Markdown editor out there, and the beauty about it is its sheer simplicity. There's no complicated settings to mess around with: just fire it up and start typing. Another neat thing about it is that it highlights key elements of your syntax, such as any words in bold, italics or lists and also displays your rendered Markdown on the right-hand side in live view, so you can preview and spot any formatting areas immediately. You can also copy Markdown in HTML format (say, if you wanted to paste it into your favourite blog platform)

  • Price: Free (for the beta version only. Anyone who donates to the developer during the beta phase will receive a free copy of version 1.0 when it is released)
  • Platform: OS X only
  • Link: Mou

2. Byword

Byword is a fantastic cross-platform minimal Markdown and rich-text editor for iPhone, iOS and Mac. You can keep all your documents in sync across all your devices using either iCloud or Dropbox and on the iPad and iPhone versions, you get an extended keyboard that helps you access common Markdown functions (such as the * symbol) quickly. There are also presets for links, images, headings and lists.

Byword can export to HTML, PDF and rich-text and allows you to preview Markdown directly from the app. I love Byword when I'm on the move (linked up to Dropbox) so I know that any changes I make when I'm not at my computer are automatically updated when I get back home.

  • Price: €2.39 (iOS); €3.99 (OS X)
  • Platform: Mac and iOS
  • Link: Byword

3. BBEdit

BBEdit is really more of a code editor (it's one of the easiest ways to code in HTML on your Mac) but also supports Markdown as well. Its interface may be a little complicated for some and its sheer range of options may well overwhelm some users but once you get to grips with it, you'll really learn just what a powerful piece of kit this is. BBEdit handles text really well and can spot any errors early on, which helps you avoid having to sift through your work later on trying to spot the errors.

These features don't come cheap, though, and I'd recommend that you download a trial version (direct download link) before committing to buy. I personally don't use BBEdit purely for writing Markdown (I use it more for HTML), but if you are a keen programmer then it's a worthwhile investment – and it's good knowing that it supports Markdown, too.

  • Price: $49.99 (around €39)
  • Platform: OS X only
  • Link: BBEdit

4. Epistle

It seems like iPhone and iPad owners have a huge choice when it comes to Markdown apps, whereas Android users are left a tad in the dark. Not any more. Epistle is a simple text editor for all Android devices that supports the Markdown syntax. You can sync your notes with Dropbox, import texts from other applications, view and edit your notes in full-screen mode and (if the setting is enabled in the Preferences pane of Epistle), view a live preview of your Markdown directly in the app. Best of all, it's completely free as well.

  • Price: Free
  • Platform: Android only
  • Link: Epistle

5. MarkdownPad

MarkdownPad is a Windows-based Markdown editor that takes several leaves out of Mou's book (or maybe it was the other way round. I'm not sure). You've got a live preview on the right-hand side and MarkdownPad also supports common Windows shortcuts, such as Control + B to make your text bold, Control + I to put your text in italics and so on.

Almost everything is customisable within MarkdownPad (including the colour scheme, font size, colour and so on) and you can also change the look of your HTML documents by using your own CSS stylesheet, directly within the app. The icing on the cake as well is that MarkdownPad is completely free. I have tested it on my Windows laptop and it runs beautifully – it really does make writing Markdown in Windows a joy.

  • Price: Free
  • Platform: Windows only (supports XP, Vista and 7 – I've also tested it under Windows 8 and it runs absolutely fine)
  • Link: MarkdownPad

6. Dillinger.io

For web-based Markdown editors, you'd be hard-pushed to find a better one than Dillinger.io. Like Mou and MarkdownPad, it's got a live preview on the right-hand side and you can copy straight from the live preview (in rich-text) into your text editor – there's no additional software to install. But it doesn't just stop there, Dillinger.io can also import from and export to both Dropbox and GitHub (once you've linked the two up with each other), so your Markdown documents aren't confined to the internet. You can also export your work directly as either a HTML or Markdown file and Dillinger.io also saves your work automatically at regular intervals, so if your browser decides to throw a hissy fit, you won't lose all your work!

  • Price: Free
  • Platform: Cross-platform (works in almost all browsers)
  • Link: Dillinger.io

7. iA Writer

iA Writer is another minimial writing app for Apple devices and was crowned by Apple as one of the Mac Apps of the Year for 2011. It supports writing in Markdown and allows you to simply focus on the writing in hand, with no other distractions. There is also a Focus mode, which fades the existing text into the background and allows you to concentrate on the current sentance you're writing. There's iCloud support across all versions, so all your documents keep in sync and the default font is clean and simple – just what you want. I regularly switch between Byword and iA Writer when I'm on the move and I find the Focus mode an especially nice touch, especially on smaller screens.

  • Price: €0.79 (iOS); €3.99 (Mac)
  • Platform: Mac and iOS
  • Link: iA Writer

8. Writing Kit

Writing Kit advertises itself as an advanced Markdown editor and it certainly packs a few decent features. Not only can you link to Dropbox to sync your files across all your devices, but you can also use your favourite TextExpander snippets and research reference materials using over 1300 different site-specific search engines directly from the app. There's also a built-in Cheatsheet for Markdown syntax and your documents are saved every 10 keystrokes so if something goes wrong, you haven't lost everything! Writing Kit is available for iOS devices and is a universal app, so once you've downloaded it on one device, you can install it on the other for free.

  • Price: €3.99 (iOS)
  • Platform: iOS only
  • Link: Writing Kit

9. WriteMonkey

Windows users have also got their own minimal writing app, WriteMonkey which also supports formatting in Markdown. Its stripped-down interface allows you to focus on one thing: the writing in hand. You can customise the interface (colours, fonts and so on) and you can also create your own CSS style sheets. Another nice little feature is the ability to set a timer, so WriteMonkey will remind you after, say, an hour of writing that it's time to take a break!

  • Price: Free (donations welcomed)
  • Platform: Windows
  • Link: WriteMonkey

10. Sublime Text

Sublime Text is the final Markdown editor on my list today and, like BBEdit, it is mainly useful as an advanced code editor that supports a wide range of syntaxes, however it can also be used to write in Markdown. There's plenty of fancy features built-in, such as the Goto Anything, which allows you to open files with only a few keystrokes as well as instantly jump to symbols, lines or words. You can also save common commands in your Command Palette and there's also a Distraction Free mode (similar to in iA Writer), whereby you can blank out all UI aspects apart from the code you are working on. Sublime Text is cross-platform (it works on Windows, Mac and Linux) and best of all, one licence covers all your computers.

  • Price: $59 (around €45)
  • Platform: Windows, Mac and Linux
  • Link: Sublime Text

Wrapping it up…

I hope that this guide has helped you demystify Markdown and helped you pick out a suitable tool to write it with. You'll soon discover that it is really easy to use and it is a really powerful yet simple tool to write with. Of course, it won't fully replace HTML in some aspects, but if you're blogging (this post was written in Markdown and gets transformed by Jekyll, by the way!), coding using GitHub or simply wanting to fancy something new, then I'd highly recommend giving it a go. It's free, simple to learn and very easy to use.

About James

Nothing pleases James more than the smell of the countryside and the atmosphere of his university city of Birmingham. Follow him on Twitter.
 

fruux is a free service that looks after your contacts, calendars and tasks so you don't have to. It makes sure that they are always in sync, no matter which device or operating system you're using. If you've not tried it yet, then why not check us out and let us know what you think! And if you're already using fruux, then we'd love to hear your thoughts and comments. You can also suggest a feature for any upcoming releases or tweet us: @fruux.