What is Markdown?

Markdown is a lightweight markup language with extremely simple learning curve. It was developed by John Gruber back in 2004 and is widely accepted across various internet websites like StackOverflow, WordPress, Ghost, Github et al.

Readability is the primary focus of Markdown, and the core idea is that even though the text is marked-up, it should be readable. As you can guess, if it is easy to read, it must be easy to write as well!

You should take out a few minutes to learn it so that you can write formatted text much more easily without using the opening and closing tags that HTML requires. It is not as extensive as HTML, and it need not be. Simplicity rules!

If you are a blogger and write regularly, learning Markdown will cut your editing time by huge factor. With that said, let's learn by example.

Headings

Most well written articles are structured. Headings allow you to structure the document. The markdown headings can have six different levels like so:

Code:

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

Output:

Level 1 Heading

Level 2 Heading

Level 3 Heading

Level 4 Heading

Level 5 Heading

Level 6 Heading

The code for the various headings are as follows:

Formatting Text

You can format the text as:

• italic *italic*
• bold **bold**
• italic and bold ***italic and bold***
• ==highlight== ==highlight==
• strikethrough ~~strikethrough~~
• ==bold & highlighted== ==**bold & highlighted**==
• etc.

Paragraphs

If there are two lines which need to be converted into paragraphs, you must leave an empty space between the paragraphs. Like so...

This is Paragraph 1. Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.

This is Paragraph 2. Blah blah blah blah blah blah blah  blah blah blah blah blah.

Split Horizontally

If a subtle paragraph is not enough, you can use --- to split your articles in sections. It is equivalent to <HR> tag in HTML. Notice that extra line just above ---

Code:

Section 1

---
Section 2

Output:

Section 1

Section 2

Quotes

As an author, and even otherwise, you will often find yourself quoting another person. You can highlight the quotes by simply using >. If you want to highlight the author you can use the highlighter markup == inside quote text like so:

Code:

> Never stop **learning**, because life never stops **teaching**! ==-some nice guy==

Output:

Never stop learning, because life never stops teaching! ==-some nice guy==

Lists

An asterisk creates a list and an indentation by space makes it nested as follows:

Unordered

Code:

* Item 1
* Item 2
  * Item 2.1
  * Item 2.2

Output:

• Item 1
• Item 2
  • Item 2.1
  • Item 2.2

Ordered

Notice that for ordered list, the actual numbering doesn't matter. All you have to do is provide a number followed by a period like so:

Code:

1. Item 1
1. Item 2
  2. Item 2.1
  2. Item 2.2

Output:

1. Item 1
2. Item 2
3. Item 2.1
4. Item 2.2

Escaping

It is possible that you trigger a numbered list by accident. Let's say you want to write:

Code:

1947. The year when India got independence from the British rule.

Output:
1947. The year when India got independence from the British rule.

What just happened and how to avoid it, you ask?
Answer: Use the following format and it would output as expected:

Code:

1947\. The year when India got independence from the British rule.

Similarly, if you want to type *something* without being converted into a something, use \*something\* and you will get *something*. Yep, I have a sick sense of humour at times!!! ;-)

The moral of the story is that backslash \ is the escape character for Markdown and comes handy when some unwanted transformation happens.

Footnotes

Wikipedia¹ uses footnotes extensively. It is sparingly used, but helps if you don't want the visitors to get digressed² .

Insert a Link

To insert a link you have to use the following format.

Code:

[Text here](http://link-to-site-here "A text that appears when you hover your mouse on the link")

Output: Text here

Insert an Image

The format to insert an image is very similar to inserting a link. You simply have to put an exclamation sign before it like so:

![Text-that-appears-behind-the-image-while-it-is-loading] (http://link-to-the-image)

Inline Code

If you want to highlight certain code inline, you can use a back tick character:

 You can use `http://www.google.com` to Google.

Output: You can use http://www.google.com to Google.

Code Blocks

If inline code won't do, and you need an entire code block, use three back-ticks ``` like so:

  var i = 0;
  var j = 1;
  //Do whatever!