Markdown Tutorial

July 30, 2018

by Umakant Jani

PHILOSOPHY


Type something get something else.

How to read this blogpost?

Anything in black background is what you type. Following that black line is what you get.


Markdown is intended to be as easy-to-read and easy-to-write as is feasible.

Readability, however, is emphasized above all else. A Markdown-formatted document should be publishable as-is, as plain text, without looking like it’s been marked up with tags or formatting instructions. While Markdown’s syntax has been influenced by several existing text-to-HTML filters — including Setext, atx, Textile, reStructuredText, Grutatext, and EtText — the single biggest source of inspiration for Markdown’s syntax is the format of plain text email.

To this end, Markdown’s syntax is comprised entirely of punctuation characters, which punctuation characters have been carefully chosen so as to look like what they mean. E.g., asterisks around a word actually look like emphasis. Markdown lists look like, well, lists. Even blockquotes look like quoted passages of text, assuming you’ve ever used email.


BLOCK ELEMENTS

PARAGRAPHS AND LINE BREAKS

A paragraph is simply one or more consecutive lines of text, separated by one or more blank lines. (A blank line is any line that looks like a blank line — a line containing nothing but spaces or tabs is considered blank.) Normal paragraphs should not be indented with spaces or tabs.

The implication of the “one or more consecutive lines of text” rule is that Markdown supports “hard-wrapped” text paragraphs. This differs significantly from most other text-to-HTML formatters (including Movable Type’s “Convert Line Breaks” option) which translate every line break character in a paragraph into a
tag.

When you do want to insert a
break tag using Markdown, you end a line with two or more spaces, then type return.

Yes, this takes a tad more effort to create a
, but a simplistic “every line break is a
” rule wouldn’t work for Markdown. Markdown’s email-style blockquoting and multi-paragraph list items work best — and look better — when you format them with hard breaks.


Headings

# h1 Heading
## h2 Heading
### h3 Heading
#### h4 Heading
##### h5 Heading
###### h6 Heading

h1 Heading

h2 Heading

h3 Heading

h4 Heading

h5 Heading
h6 Heading

Bold, Italic and Delete

**This is bold text**

This is bold text

__This is bold text as well__

This is bold text as well

*This is italic text*

This is italic text

_This is italic text as well_

This is italic text as well

~~Deleted text~~

Deleted text


Math Formula

This is text with inline math $\sum_{n=1}^{\infty} 2^{-n} = 1$ and with math blocks:

$$
\sum_{n=1}^{\infty} 2^{-n} = 1
$$

This is text with inline math $\sum_{n=1}^{\infty} 2^{-n} = 1$ and with math blocks:

$$ \sum_{n=1}^{\infty} 2^{-n} = 1 $$


Creating a table

| Heading | Another heading |
| :----:  | :-------------: |
|  text   |      text       |
|  text   |      text       |
|  text   |      text       |
Heading Another heading
text text
text text
text text

> Block quotes are
> written like so.
>
> They can span multiple paragraphs,
> if you like.

Block quotes are written like so.

They can span multiple paragraphs, if you like.

Some text, and some code and then a nice plain [link with title](https://github.com/davidhampgonsalves/davidhampgonsalves.com-hugo "title text!").

Some text, and some code and then a nice plain link with title.


Horizontal Rule

Three or more...

---

Hyphens

***

Asterisks

___

Underscores

and then list

+ Create a list by starting a line with `+`, `-`, or `*`
+ Sub-lists are made by indenting 2 spaces:
  - Marker character change forces new list start:
    * Ac tristique libero volutpat at
+ Very easy!

vs.

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
  • Create a list by starting a line with +, -, or *
  • Sub-lists are made by indenting 2 spaces:
    • Marker character change forces new list start:
    • Ac tristique libero volutpat at
  • Very easy!

vs.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa

Code

Inline code

var foo = function (bar) {
  return bar++;
};

console.log(foo(5));

Previous Article | Next Article

Share this post on:

LinkedIn | Twitter | Reddit | Facebook | Email | Whatsapp

Tags:

umakant, markdown, coding, development,