Summary

Element	Markdown	HTML Tag	Rendered Output
Heading	# H1	<h1></h1>	H1
Paragraph	at least one blank line between paragraphs	<p></p>	Texts in a paragraph
Line Break	at least two spaces at EOL	<br>	The first line The second line
Italic	*italic*	<em></em>	italic
Bold	**blod**	<strong></strong>	blod
Blockquote	> blockquote	<blockquote></blockquote>	blockquote
Ordered List	1. 1st item 2. 2nd item 3. 3rd item	<ol> <li></li> </ol>	1st item 2nd item 3rd item
Unordered List	- item Alpha - item Beta - item Gamma	<ul> <li></li> </ul>	item Alpha item Beta item Gamma
Code	`code`	<code></code>	code
Horizontal Rule	---	<hr>
Link	[Github](https://github.com/)	<a></a>	Github
Image		<img src=“xxx.jpg” alt=“pic”>

Basic Syntax

Headings

To create a heading, add one or more number signs # in front of the heading text.

<!-- Markdown -->
# H1

# H2

# H3

# H4

# H5

# H6

<!-- HTML -->
<h1>H1</h1>

<h2>H2</h2>

<h3>H3</h3>

<h4>H4</h4>

<h5>H5</h5>

<h6>H6</h6>

Alternatively, there is also the underline-ish style.

Add one or more = characters for H1:

<!-- Markdown -->
Alt-H1
======

<!-- HTML -->
<h1>Alt-H1</h1>

Add one or more - characters for H2:

<!-- Markdown -->
Alt-H2
------

<!-- HTML -->
<h1>Alt-H2</h1>

The rendered output should be the same as the corresponding ones mentioned above.

Paragraphs

Put at least one blank line between paragraphs. Multiple lines of text with no blank lines or spaces in between will be treated as one paragraph.

<!-- Markdown -->
This paragraph consists of two sentences.
This is the first one.
This is the second one.

<!-- HTML -->
<p>This paragraph consists of two sentences.
This is the first one.
This is the second one.</p>


<!-- Markdown -->
This is a paragraph.

This is another paragraph.

<!-- HTML -->
<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

Line Breaks

End a line with two or more spaces to create a line break.

<!-- Markdown -->
This sentence should be on a single line.  
And so should this sentence.

<!-- HTML -->
<p>This sentence should be on a single line.<br>
And so should this sentence.</p>

Emphasis

Add emphasis by making text bold, or italic, or both bold and italic.

<!-- Markdown -->
To bold text, add two **asterisks** or __underscores__ before and after text.

To bold the middle of a word, 
add two asterisks without spaces around the letters, 
like Pseudo**random**ness.

<!-- HTML -->
To bold text, add two <strong>asterisks</strong> or <strong>underscores</strong> before and after text.

To bold the middle of a word,
add two asterisks without spaces around the letters,
like Pseudo<strong>random</strong>ness.


<!-- Markdown -->
To italicize text, add one *asterisk* or _underscore_ before and after text.

To italicize the middle of a word,
add one asterisk without spaces around the letters,
like Multi*thread*ing.

<!-- HTML -->
To italicize text, add one <em>asterisk</em> or <em>underscore</em> before and after text.

To italicize the middle of a word,
add one asterisk without spaces around the letters,
like Multi<em>thread</em>ing.


<!-- Markdown -->
To bold and italicize text simultaneously, add three ***asterisks*** or ___underscores___ before and after text.

To bold and italicize the middle of a word,
add three asterisks without spaces around the letters,
like Re***engineer***ing.

<!-- HTML -->
To bold and italicize text simultaneously, add three <em><strong>asterisks</strong></em> or <em><strong>underscores</strong></em> before and after text.

To bold and italicize the middle of a word,
add three asterisks without spaces around the letters,
like Re<em><strong>engineer</strong></em>ing.

Blockquotes

To create a blockquote, add a > character in front of a paragraph. Blockquotes can contain multiple paragraphs, nested contents, and other Markdown formatted elements.

<!-- Markdown -->
> I can calculate the motion of heavenly bodies, but not the madness of people. 

<!-- HTML -->
<blockquote>
<p>I can calculate the motion of heavenly bodies, but not the madness of people.</p>
</blockquote>


<!-- Markdown -->
> Git actually has a simple design, with stable and reasonably well-documented data structures. In fact, I'm a huge proponent of designing your code around the data, rather than the other way around, and I think it's one of the reasons git has been fairly successful.
>
> I will, in fact, claim that the difference between a bad programmer and a good one is whether he considers his code or his data structures more important. Bad programmers worry about the code. Good programmers worry about data structures and their relationships.

<!-- HTML -->
<blockquote>
<p>Git actually has a simple design, with stable and reasonably well-documented data structures. In fact, I’m a huge proponent of designing your code around the data, rather than the other way around, and I think it’s one of the reasons git has been fairly successful.</p>
<p>I will, in fact, claim that the difference between a bad programmer and a good one is whether he considers his code or his data structures more important. Bad programmers worry about the code. Good programmers worry about data structures and their relationships.</p>
</blockquote>


<!-- Markdown -->
> He liked especially the following expression, which he marked with a pencil, and which he in substance afterwards used in his Gettysburg Address: 
> 
> > 'Democracy is direct self-government, over all the people, for all the people, by all the people.'

<!-- HTML -->
<blockquote>
<p>He liked especially the following expression, which he marked with a pencil, and which he in substance afterwards used in his Gettysburg Address:</p>
<blockquote>
<p>‘Democracy is direct self-government, over all the people, for all the people, by all the people.’</p>
</blockquote>
</blockquote>

Lists

Items can be organized into ordered by adding line items with numbers followed by periods, or unordered lists by adding line items with dashes -, asterisks *, or plus signs +.

<!-- Markdown -->
1. 1st item
2. 2nd item
3. 3rd item
   1. 1st sub-item
   2. 2nd sub-item
4. 4th item

<!-- HTML -->
<ol>
<li>1st item</li>
<li>2nd item</li>
<li>3rd item
<ol>
<li>1st sub-item</li>
<li>2nd sub-item</li>
</ol>
</li>
<li>4th item</li>
</ol>


<!-- Markdown -->
- item Alpha
- item Beta
- item Gamma
    - sub-item Delta
    - sub-item Epsilon
- item Zeta

<!-- HTML -->
<ul>
<li>item Alpha</li>
<li>item Beta</li>
<li>item Gamma
<ul>
<li>sub-item Delta</li>
<li>sub-item Epsilon</li>
</ul>
</li>
<li>item Zeta</li>
</ul>

Code

To denote text as code, enclose it in backticks `. If the text includes one or more backticks, use double backticks `` to enclose the text. To create code blocks, indent every line of the block by four or more spaces, or just one tab. Most Markdown processors also support fenced code blocks ``` or ~~~.

<!-- Markdown -->
`This` is a proper noun.

<!-- HTML -->
<code>This</code> is a proper noun.


<!-- Markdown -->
``The `entire sentence` will be highlighted``

<!-- HTML -->
<code>The `entire sentence` will be highlighted</code>


<!-- Markdown -->
``` python
def sample_function():
    return "this function is in a code block!"
```

<!-- HTML -->
<!-- varies on Markdown processors. -->

1
2

def sample_function():
    return "this function is in a code block!"

Horizontal Rules

To create a horizontal rule, use three or more asterisks ***, dashes ---, or underscores ___ on a single line.

<!-- Markdown -->
***

<!-- ----- -->

<!-- _______ -->

<!-- HTML -->
<hr>

Links

To create a link, enclose the link text in brackets [], followed by the URL in parentheses (). Optionally, enclose a title in quotation marks "" after the URL to add a title for the link, which will appear as a tooltip when the users hover over the link. In addition, there is also reference-style links consisting of two parts.

<!-- Markdown -->
[Link to Github](https://github.com/)

[Link to Git with title](https://git-scm.com/ "A distributed version control system")

[GitHub][1] is a cloud-based service for version control using [Git][2].

[1]: https://github.com/ "Link to Github"
[2]: https://git-scm.com/ "Link to Git"


<!-- HTML -->
<a href="https://github.com/">Link to Github</a>

<a href="https://git-scm.com/" title="A distributed version control system">Git</a>

<a href="https://github.com/" title="Link to Github">GitHub</a> is a cloud-based service for version control using <a href="https://git-scm.com/" title="Link to Git">Git</a>.

Images

To add an image, add an exclamation mark !, followed by alt text in brackets [], and the URI to the image in parentheses (). Optionally, add a title in quotation marks "" after the URI.

<!-- Markdown -->
![pic](/img/markdown/time.jpg "Melbourne Busiest Times")

<!-- HTML -->
<figure>
<img src="/img/markdown/time.jpg" alt="pic">
<figcaption>Melbourne Busiest Times</figcaption>
</figure>

Rendered Output

Best Practices

• Even if the syntax is the same, the final rendered output may vary on specific Markdown processors.
• Markdown is a lightweight markup language. It is often feasible to embed HTML in Markdown code for better functionality or compatibility.
• Taking compatibility into consideration, prefer the most common and distinguishable syntax. For example, to create a line break, <br> can be preferable as trailing whitespace is hard to see. Besides, consider always putting a blank line both before and after headings, blockquotes, horizontal rules, etc.

Reference

1. Markdown Syntax by John Gruber
2. Markdown Guide