But as a busy blogger or web writer, you’d just want to write your post and not be bothered with markup code. HTML tags are meant to be read by web browsers, not people.
Writer/blogger John Gruber in 2004 came up with a solution: Markdown, a plain text formatting syntax and HTML conversion tool. It lets you specify how your page should look like in browsers with as little markup code as possible so you could pay more attention to the substance, rather than the form, of what you’re writing.
Hand-coding in HTML
But First, What About WYSIWYG Editors?
Most blogging platforms and CMS already have built-in WYSIWYG (What You See is What You Get) editors, saving you from having to write laboriously in plain HTML. However, despite being as easy to use as traditional word processors, these WYSIWYG editors are not without issues:
Issue #1. You’d need to access them directly so you can write – meaning you can’t simply write whenever you want.
Issue #2. You can write first on a word processor, and then transfer what you’ve written to a WYSIWYG editor. But as anyone trying to copy-paste from Microsoft Word soon finds out, the HTML code can get very messy.
This is the code MS Word generated for the paragraph above.
Issue #3. So to avoid this hideous bloat, some would write first in a plain text editor like Notepad and apply formatting and styles later in a WYSIWYG editor. This is an inconvenient, added step.
Issue #4. You’re not seeing it as you write, but WYSIWYG editors also tend to spit out bloated, unoptimized code that could make your web pages unnecessarily heavy and slow.
Markdown Simplifies and Speeds Up Your Writing Process
Markdown resolves many of the issues mentioned above. John Gruber (who had a Computer Science background) designed his creation to be as readable as possible, making documents formatted with it to be “publishable as-is, as plain text, without looking like it’s been marked up with tags or formatting instructions.”
Think of it as a happy middle ground between the no-fuss simplicity of plain text and the styling convenience of a WYSIWYG editor:
#1. Markdown is a not tied to any platform or software. You can write on your Windows desktop or using an online Markdown tool, edit your document later on an iPad or an Android device, and then revise it on your blog. You can use it online or offline.
#2. Markdown uses familiar punctuation like asterisks, hashtags, and brackets – marks that people already tend to use to indicate emphasis, lists, or insertions, and to assign other special meaning to a portion of text.
#3. Markdown makes it far easier to work with HTML. It is NOT a substitute to HTML, but it’s the next best thing: an HTML shorthand. If you don’t want to learn HTML or it confuses you, learn Markdown instead, which is simpler and more intuitive.
And even if you’re already proficient at HTML, Markdown speeds up your writing process. Compare hyperlinking in plain HTML and in Markdown: for example, in place of the cumbersome a href tag, now you can just use brackets around the anchor text and put the target URL within parentheses. For multiple links, you can simply reference the URLs in a list somewhere else in the document, like you do in traditional document citations.
Marking up text with Markdown
#4. Markdown is clean, lightweight and minimal. It converts your marked up text into tidy and valid HTML code, meaning there’s none of the bloat associated with WYSIWYG editors.
#5. Because it uses already-familiar symbols, it is even faster to learn than HTML. Markdown basics take only minutes to learn, as you’ll see in a bit. We will take a closer look at the basic syntax next
Stripped Down to the Basics: Markdown Syntax
Let’s cover the basic functions, or the ones that you’ll use most frequently while blogging.
Task | Markdown Input | HTML Output | Preview |
Italicize text | *Italicize text* | <em>Italicize text</em> | Italicize text |
Bold text | **Bold text** | <strong>Bold text</strong> | Bold text |
In-text linking | In-text [linking](http://url.com/ "Title") | In-text <a href="http://url.com/" title="Title">linking</a> | In-text linking |
Headings | #Heading 1#
##Heading 2##
###Heading 3### | <h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3> | Heading 1 Heading 2 Heading 3 |
List Items | 1. Item 1 2. Item 2 3. Item 3 | <ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol>
|
|
Nest List | * Heading 1 * Sub-Heading 1 * Heading 2 * Sub-Heading 2 * Sub-Heading 3 1. Number 1 * Sub-Heading 3 * Heading 3 | <ul> <li>Heading 1 <ul><li>Sub-Heading 1</li></ul></li> <li>Heading 2 <ul><li>Sub-Heading 2</li> <li>Sub-Heading 3 <ol><li>Number 1</li></ol></li> <li>Sub-Heading 3</li></ul></li> <li>Heading 3</li> </ul>
<p>Blockquotes</p> |
|
Image | ![alt text][4]
Then define link anywhere else in the doc, as follows: [4]: http://placehold.it/350x150 | <img src="/url/to/img.jpg" alt="alt text" title="Title" /> | |
Markdown isn’t at all that hard, is it? Now that you’re familiar with the basics, it’s time to hunker down and write. The good news is, there are a lot of sites and tools now available for helping you write and blog with Markdown.
Blogging Platforms and CMS that Support Markdown
Reddit, Stack Exchange, and GitHub have long embraced Markdown and even came up with their own “flavors” or variants. Adoption of the syntax has been slow, however; Markdown was created 10 years ago, but its usage has been mostly confined to geek circles. Gruber told Fast Company Co.LABS that the reason is that “users don't adopt it until software they use supports it.”
But that’s changing now, as evidenced by the growing number of tools and platforms implementing it. In November 2013, WordPress.com announced ts support for the syntax. Its plain text editor can now work with either HTML or Markdown.
The self-hosted software version of WordPress still doesn’t have Markdown support, but there are plugins that you could use in the meantime, such as WP Markdown and Typewriter. MovableType has also gone the plugin way to accommodate Markdown. Similarly, Drupal now has a module and Joomla has extensions for this purpose.
Markdown also makes it possible for dozens of sleek new blog platforms and CMS to be as minimalist and distraction-free as possible. We’ve already covered some of them in a previous post. Here are a few more:
- Ghost - https://ghost.org/
- Silverback - https://www.silvrback.com/
- Scriptogr.am - http://scriptogr.am/
- Dropplets - http://dropplets.com/
- WardrobeCMS - http://wardrobecms.com/
- AnchorCMS - http://anchorcms.com/
- Jekyll - http://jekyllrb.com/
- Kirby - http://getkirby.com/
Markdown Tools and Apps
Because Markdown is platform-independent and portable, you can use it in different ways: online, offline; on your desktop, tablet, or phone; on Windows, Linux, or iOS. Here are a few examples of tools:
1. MarkdownPad
MarkdownPad is a downloadable tool for Windows that has instant HTML preview, customizable CSS, HTML and PDF Export, among other features. The pro version also supports more advanced Markdown engines, such as Markdown extra and GitHub-flavored Markdown.
2. Byword (Mac OS/iOS)
Images taken from the Byword site
Most Markdown writing apps are made for the Mac OS/iOS. Byword is one of the most popular, and for a good reason. Aside from full Markdown support, it is available for all devices that run on the Mac OS and iOS, which means you can edit and sync what you’ve written across your Mac, your iPad, iPhone, or iPod. You can also directly publish to your blog on WordPress, Tumblr, Blogger, Scriptogr.am, as well as your Evernote account.
3. UberWriter (Linux-Ubuntu)
Image taken from the UberWriter site
UberWriter is an elegant Markdown editor for Ubuntu that offers a bit more than just a simple, distraction-free writing environment and HTML conversion. It uses pandoc,a universal document conversion language that extends Markdown. So you can export not just in HTML, but also in PDF and RTF formats. Mathematical equations can also be exported into these formats (via Latex). UberWriter is as distraction-free as it gets with syntax highlighting or a “focus mode” whereby only the active line you are typing is highlighted, while the rest of the text fades into the background.
4. Dingus (Online/Browser-based)
If you're new to Markdown, you'll want to drop by this site first. It's a Markdown converter and primer in one, what with a handy syntax “cheat sheet” always visible to your right. When you click "Convert", Dingus will instantly generate an HTML version, as well as a live preview, of your Markdown text.
5. Markdown Live Editor (Online/Browser-based)
Unlike Dingus, Markdown Live Editor doesn't provide a live preview for HTML text. However, if you’re accustomed to WYSIWYG editors, Dingus can be a good, introductory tool to learn and practice Markdown. Its simple WYSIWYG-like interface will make you feel right at home.
6. Draft (Android)
Images taken from the UberWriter site
Draft for Android supports both Markdown and <a href="http://fletcherpenney.net/multimarkdown/" rel="nofollow">MultiMarkdown</a>. (MultiMarkdown is a souped-up version of the original which lets you add tables, footnotes, citations, among others, and lets you convert to multiple output formats, quite like what UberWriter does). Draft lets you organize your files, store them in the cloud with Dropbox, and sync them across your devices. It is still under development.
Try Markdown and See for Yourself
While Gruber wrote that Markdown is easy to learn even just by looking at examples of it in action, he also thought that people mistakenly believe that Markdown “adds a layer of hassle between your writing and the HTML markup” and resist trying it. “You have to actually try it to see that it removes hassle,” he said.
We’ve walked you through the basics as well as the tools to get you started with Markdown. We think that Markdown is a fantastic power tool for writing: it saves you time and free you from clutter so you can focus on writing great content for your blog. But don’t just take our word for it – like Gruber said, check it out!
Catherine, 13 June, 2014
Very nice guide!