/ Markdown

A Beginner's Guide to Markdown

Back in 2004, John Gruber had something in mind - create a format that will allow people to write rich content on the web, using a syntax that is easy to write and read. This format is Markdown and is popular among many users and sites such as GitHub and Stack Overflow. This guide will teach you the basics of Markdown and help you write better and faster for the web.

What is Markdown?

Markdown is a markup language with a plain text syntax. It allows you to write structured contents for the web, which is then converted to a clean and valid HTML format or any other formats such as PDF depending on the tool you're using.

Below is a quote from Albert Einstein written in Markdown:

> Any man who can drive safely while kissing a **pretty** girl is simply not giving the *kiss* the attention it deserves. - [Albert Einstein](https://en.wikipedia.org/wiki/Albert_Einstein)

The above will translate to:

Any man who can drive safely while kissing a pretty girl is simply not giving the kiss the attention it deserves. - Albert Einstein

Why Would You Want to Write in Markdown?

Markdown provides some benefits on top of other popular formats such as HTML and Rich Text Format (RTF). Some of these benefits are:

  • it's syntax is easy to learn and use
  • it's faster to write and style your content than a traditional word processor or WYSIWYG
  • it produces a clean output when exported to HTML or PDF
  • it's portable, meaning that you can work across different OSes and editors

Another advantage is that it improves your writing flow in the long run. As you can see in the above example, you can format your content with just a couple of keystrokes. Markdown allows you to use just the keyboard to apply styles on your content on the fly, without reaching for your mouse to click on a particular format button.

The Markdown Syntax

Let's get you started with the basics of Markdown.

Headings

Prefix headings with the hash symbol (#). One hash for h1 up to six hashes for a h6.

# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

Or, you can also use an underline style for H1 and H2.

Heading 1
=========

Heading 2
---------

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Empasis

Put emphasis on your words with the asterisks (*) or underscore (_) symbol

Italics
*emphasis* OR _emphasis_

Bold
**strong emphasis** OR __strong emphasis__

Combination of Italics and Bold
***italics and bold*** OR **_italics and bold_**

emphasis

strong emphasis

italics and bold

Surround the text you want to link around a pair of square brackets and the URL around rounded ones.

Here’s a link to [Google](http://www.google.com)

Here’s a link to Google

Images

Images have the same syntax as links except they’re prefixed with an exclamation mark (!)

![Good News](http://i.imgur.com/EgIHEsL.jpg)

Good News

Lists

Just prefix any text with an asterisks (*), a plus sign (+) or a dash (-) to create an unordered list. For ordered list, use numbers

// Unordered list
+ item 1
+ item 2
+ item 3

- item 1
- item 2
- item 3

* item 1
* item 2
* item 3

// Ordered list
1. item 1
2. item 2
3. item 3

Unordered list

  • item 1
  • item 2
  • item 3

Ordered list

  1. item 1
  2. item 2
  3. item 3

Use can also do nested ordered/unordered lists like that:

* item 1
    * item a
    * item b
* item 2

Nested list

  • item 1
    • item a
    • item b
  • item 2

Horizontal Rule

If you want to include a horizontal rule to separate your contents, use three or more asterisks or underscores.

using asterisks
***

using underscores
___

using asterisks


using underscores


Quotes

Prefix quotes with the greater-than (>) sign

> The quick brown fox jumped over the lazy dog

The quick brown fox jumped over the lazy dog

Code Blocks and Syntax Highlighting

Markdown will recognize code blocks because they’re part of the language specification. On the other hand, it won’t highlight the syntax for you, at least not by default. However, many editors, as well as sites such as GitHub, do.

There are two ways Markdown will recognize your codes - either surround your them using back-ticks (`) or indent them with four spaces or one Tab.

This is an `inline` code

This is an inline code

Codes spreading on multiple lines (a.k.a code blocks) should use three backticks. Another alternative is to indent your code with four spaces or by one tab.

```
var area = function(length, width){
    return length * width;
}

console.log(area(2, 2));
```

HTML Elements

One cool feature about Markdown is that you can embed raw HTML in your Markdown document.

<p>This is a paragraph</p>

Button
<button>Click</button>

This is a paragraph

If you want to strike through a character, use the del element

<del>Word</del>

Word

How to Get Started with Markdown?

You can use any text editor (SublimeText, Atom, Notepad++, TextMate, etc…) of your choice as Markdown is just a plain-text format. However, there are some apps that are designed for writers and most of them provide a distraction-free experience.

Here’s a list of the best ones on both OS X and Windows

OS X Apps

Windows Apps

The best one on both iOS and Android IMHO is iA Writer

Conclusion

Markdown is an alternative to HTML and Rich Text Format for creating contents on the web. It’s easy to use and you can write fast with it. Learn Markdown today and you’ll never go back.

A Beginner's Guide to Markdown
Share this

Subscribe to Djamseed Khodabocus