The Markdown Guide Note

1.Getting Started

https://dillinger.io/

2.Doing Things With Markdown

Websites

Documents

Mac:MacDown, iA Writer, or MarkediOS / Android:iA WriterWindows:ghostwriter or Markdown MonsterLinux:ReText or ghostwriterWeb:Dillinger or StackEdit

Note

Books

Presentations

Email

Documentation

3.Basic Syntax

Character Name

符号	名字
\	backslash `
`	tick mark
*	asterisk
_	uderscore
{}	curly braces
[]	brackets
()	parentheses
#	pound sign
+	plus sign
-	minus sign(hyphen)
.	dot
!	exclamation mark
|	pipe

Heading

#

<h1></h1>

Markdown

\# Heading level 1

\## Heading level 2

\### Heading level 3

\#### Heading level 4

\##### Heading level 5

HTML

Heading level 1 `<h1> Heading level 1</h1>`

Heading level 2 `<h2>Heading level 2 </h2>`

alternate syntax

=========

-------

Paragraphs

use blank line

markdown

1 I really like using Markdown
2
3 I think  I'll use it from now on.

HTML

1 `<P> I really like using Markdown.</p>`
2
3 `<p> I think I'll use it from now on.</p>`

Line Break

two or more spaces

<br>

markdown

1 This is the first line.

2 And this is the second line.

HTML

1 `<P>This is the first line.<br />`

2 And this is the second line.`</p>`

Emphasis

Bold

two asterisks or underscores

Markdown

1 love ** bold text**.
2
3 love  __bold text__.
4
5 Love**is**bold.

HTML

1 I love <strong>`bold text </strong>
2
3 Love <strong>is</strong>bold.

Italic

Markdown

The *cat's meow*.

The _cat's meow_.

A*cat*meow.

HTML

The `<em>`cat's meow `</em>`

A `<em>`cat `</em>`meow

Bold and Italic

markdown

1 ***Important*** text.
2
3 __Important__ text.
4
5 _*Important*_ text.
6 
7 **_Important_** text.

HTML

`<strong><em>`Imortant `</em><strong>` text.

Blockquotes

Blockquotes

>

markdown

1 > Dorothy followed her through many rooms.

HTML

<blockquote>
 <p>Dorthy followed her through many rooms.</p>
 </blockquote>

Blockquotes with Multiple Paragraphs

> on the blank lines

markdown

1 > This is first paragraphy.
2 >
3 > And this is the second paragraphy.

HTML

1 <blockquote> 
2 <p>This is first paragraphy.</p>
3 <p> And this is the second paragraphy.</p>
4 </blockquote>

Nested Blockquotes

>>

markdown

1 > This the first paragraphy.
2 >
3 >> And this is the nested paragraphy.

HTML

1 <blockquote>
2   <p>This is the first paragraphy.</p>
3   <blockquote>
4     <p>And this is the nested paragraphy.</p>
5   </blockquote>
6 </blockquote>

Blockquotes with Other Elements

markdown

1 > ### The quarterly results look great!
2 >
3 > - Revenue was off the chart
4 > - Profits were higher than ever.
5 >
6 > *Everything* is going **well**.

HTML

1 <blockquote>
2  <h5>The quarterly results look great!</h5>
3  <ul>
4   <li> Revenue was off the chart.</li>
5   <li>Profits were higher than ever.</li>
6  </ul>
7  <p><em>Everything</em> is going <strong>well<strong>.</p>
8 </blockquote>

List

Ordered lists

markdown

1 1.First item
2 2.Second item
3 3.Third item
4 4.Fourth item
5
6 1.First item
7 1.second item
8 1.Third item
9 1.Fourth item
10
11 1.First item
12 2.Second item
13 3.Third item
14 5.Fourth item

HTML

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
  <li>Fourth item</li>
</ol>

Nesting List Items

Markdown

1 1.First item
2 2.Second item
3 3.Third item
4  1.Indented item
5  2.Indented item
6 4.Fourth item

HTML

1 <ol>
2  <li>First item</li>
3  <li>Second item</li>
4  <Li>Third item</li>
5      <ol>
6        <li>Indented item</li>
7        <li>Indented item</li>
8      </ol>
9  </li>
10  <li>Fourth item</li>
11  </ol>

Unordered Lists

markdown

1 - First item
2 - Second item
3 - Third item
4 - Fourth item
5
6 * First item
7 * second item
8 * Third item
9 * Fourth item
10
11 + First item
12 + Second item
13 + Third item
14 + Fourth item

HTML

1 <Ul>
2   <li>First item</li>
3   <li>Second item</li>
4   <Li>Third item</li>
5  <Ul>

Nesting List Items

markdown

1 - First item
2 - Second item
3 - Third item
4 	- Indented item
5	- Indented item
6- Fourth item

HTML

1 <ul>
2  <li>First item</li>
3  <li>Second item</li>
4  <Li>Third item
5      <ul>
6        <li>Indented item</li>
7        <li>Indented item</li>
8      </ul>
9  </li>
10  <li>Fourth item</li>
11  </ul>

Adding Elements in lists

paragraphs

indent the element four spaces or one tab

Markdown

1 * This is the first list item.
2 * Here's the second list item
3
4  I need to add another paragraph below the second list item.
5
6 * And here's the third list item.

HTML

1 <ul>
2    <li><p>This is the first list item.</p></li>
3    <li><p>Here's the second list item.</p>
4      <p> I need to add another paragraphy below the second list item.</p>
5     </li>
6     <li><p>And here's the third list item.</p></li>
7      </ul>

Blockquotes

Markdown

1 * This is the first list item.
2 * Here's the second list item.
3 
4   > A blockquote would look great here.
5
6 * And here's the third list item.

HTML

1 <ul>
2   <li><p>This is the first list item.</p></li>
3   <li><p>Here's the second list item.</p>
4     <blockquote>
5       <p>A blockquote would look great here.</p>
6     </blockquote>
7   </li>
8  <li><p>And here's the third list item.</P>
9   </li>
10 </ul>

Code Blocks

Markdown

1 1.  Open the file
2 2. Find the fllowing code block on line 21:
3  
4 	<html>
5 	  <head>
5	    <title>Test</title>
6  	  </head>
7 3. Update the title to match the name of your website.

HTML

1 <ol>
2   <li><p>Open the file.</p></li>
3   <li><p>Find the following code block on line 21:</p>
4     <pre><code>⁢&lt ;⁢html&gt ;
5      &lt ;<head>&gt ;
6       &lt ; <title>&gt ;Test&lt ;/title&gt ;
7     &lt ;/head&gt ;
8    </code></pre>
9    </li>
10      <li><p>Update the title to match the name of your website.</p></li>
11 </ol>

Images

markdown

1 1. Open the file containing Tux, the Linux mascot.
2 2. Marvel at its beauty.
3
4    ![Tux](images/xx.png)
5
6 3. Close the file.

HTML

1 <ol>
2  <li><p>Open the file contaning Tux, the Linux mascot.</p></li>
3  <li>
4	<p>Marvel at its beauty.</p>
5	<p><img src="https://res.weread.qq.com/wrepub/XXX.png" date-w="125px" date=tatio="1.192" date-w-new="149px" alt="Tux" /></p>
6  </li>
7  <li><p>Close the file.</p></li>
8 </ol>

Code

Code

`

Markdown

1 At the command prompt, type  `nano`.

HTML

1 At the command prompt, type <code>nano <code>

Escaping Tick Marks

``

Markdown

``use `code` in your Markdown file.``

HTML

<code>Use `code` in your Markdown file.</code>

Code Blocks

Markdown

1 <html>
2        <head>
3        </head>
4    </html>

HTML

1 <pre>
2    <code>
3     &lt ;html&gt ;
4        &lt ;head&gt ;
5        &lt ; /head&gt ;
6     &lt ;/html&gt ;
7    </code>
9 </pre>

Horizontal Rules

***

—

___

Markdown

1 ***
2 
3---
4
5___

HTML

1 <hr />
2
3 <hr />
4
5 <hr />

Links

Links

Markdown

1 Use [Duck Duck Go](http://duckduckgo.com).

HTML

1 <P> Use <a href="https://duckduckgo.com">Duck Duck Go </a>.</P>

Adding Titles

Markdwon

1 Use [Duck Duck Go](https://duckduckgo.com "My search engine").

HTML

1 <P>Use <a href="https://duckduckgo.com" title="My search engine!">Duck \
2 Duck Go </a>.</p>

URLS and Email Addresses

Markdown

1 [http://eff.org](http://eff.org)
2 <fake@example.com>

HTML
1 <a href="https://eff.org">https://eff.org </a>
2 <a href="mailto:fake@example.com">fake@example.com </a>

Formatting Links

Markdown

1 I love supporting **[EFF](HTTPS://eff.org)**.
2 This is the *[EFF](http://eff.org)*.

HTML

1 <P>I love supporting <strong><a href="https://eff.org">EFF</a></strong>

2 This is the <em><a href="http://eff.org">EFF </a></em>.</p>

Reference-style Links

Markdown

1 In a hole in the ground there lived a hobbit. Not a nasty, dirty, wet h\
2 ole, filled with the ends of worms and an oozy smell, nor yet a drym ba\
3 re, sandy hole with nothing in it to sit down on or to eat: it was a [h\
4 obbit-hole](https://en.wikipedia.org/wiki/Hobbit#Lifestyle "Hobbit life\
5 styles"), and that means comfort.

Markdown02

1 In a hole in the ground there lived a hobbit. Not a nasty, dirty, wet h\
2 ole, filled with the ends of worms and an oozy smell, nor yet a drym ba\
3 re, sandy hole with nothing in it to sit down on or to eat: it was a [h\
4 obbit-hole][1], and that means comfort.
5
6 [1]:<https://en.wikipedia.org/wiki/Hobbit#Lifestyle> "Hobbit life\
7 s"

HTML

1 <a href="https://en.wikipedia.org/wiki/Hobbit#Lifestyle" title="Hobbit lifestyles">hobbit-hole</a>

Images

!

Markdown

1 ![Philadelphia's Magic Gardens. This place was so cool!](images/philly-\
2 magic-garden.png "Philadelphia's Magic Gardens'")

HTML

1 <img src="https://res.weread.qq.com/wrepub/CB_E1a8xm8wXEPV6Q16pW_philly-magic-garden.png" data-w="847px" date-ratio="0.750" data-w-new="635px" alt="Philadelphia's" Magic Gar\
2 dens. This place was so cool!" title="Philadelphia's Magic Gardens" />

Escaping Characters

Markdown

1 \* Without the backslash, this would be a bullet in an unordered list.

HTML

1 <P>* Without the backslash, this would be a bullet in an unordered list\

2 . </p>

4.Extended Syntax

Tables

Table

—

|

Markdown

1 | Syntax    | Description |
2 | --------- | ----------- |
3 | Header    | Title       |
4 | Paragraph | Text        |

HTML

1 <table>
2     <thead>
3         <tr class="header">
4            <th>Syntax</th>
5             <th>Description</th>
6         </tr>
7     </thead>
8    <tbody>
9         <tr class="ood">
10             <td>Header</td>
11            <td>Title</td>
12         </tr>
13         <tr class="event">
14             <td>Paragraphy</td>
15             <td>Text</td>
16         </tr>
17    </tbody>
18 </table>

Alignment

Markdown

1 | Syntax     | Description |   Test Text |
2 | :--------- | :---------: | ----------: |
3 | Header     |    Title    | Here's this |
4 | Paragraphy |    Text    |    And more |

HTML

1 <table>
2     <thead>
3         <tr class="header">
4             <th style="text-align: left;">Syntax</th>
5             <th style="text-align: center;">Description</th>
6             <th style="text-align: right;">Test Text</th>
7         </tr>
8      </thead>
9 <tbody>
10     <tr class="ood">
11         <td style="text-align: left;">Header</td>
12         <td style="text-align: center;">Title</td>
13         <td style="text-align: right;">Here's this</td>
14     </tr>
15     <tr class="event">
16         <td style="text-align: left;">Paragraphy</td>
17         <td style="text-align: center;">Text</td>
18         <td style="text-align: right;">And more</td>
19     </tr>

Fenced Code Blocks

```

~~~

markdown

1 ```
2 {
3        "firstName":"John&",
4        "lastNmae":"Smith",
5        "age": 25
6    }

HTML

1 <pre>
2     <code>
3     {
4         &quot ;firstName &quot ;: &quot ;John &quot ;,
5          &quot ;lastNmae &quot ;: &quot ;Smith &quot ;,
6          &quot ;age &quot ;: 25
7     }
8     </code>
9 </pre>

Syntax Highlighting

markdown

1 ```json
2 {
3    "firstName": "john",
4    "lastName": "Smith" 
5    "age": 25
6 }
7 ```

HTML

1 <pre>
2     <code class="language-json">
3      {
4         "firstName":"John",
5         "lastName":"Smith",
6         "age": 25
7      }
8     </code>
9 </pre>

Footnotes

markdown

1 Here's a simple footnote, [^1] and here's a longer one.[^bignote]
2
3 [^]: This is the first footnote.
4
5 [^bignote]: Here's one with multiple paragraphs and code.
6
7  Indent paragraphys to include them in the footnote.
8
9  `{my code}`
10
11   Add as many paragraphs as you like.

HTML

1 <P>
2   Here's a simple footnote, <a href="#fn1" class="footnote-ref" id="fnre\
3 f1"><sup>1</sup></a>and here's a longer one.<a href="#fn2" class="foot\
4 note-ref" id="fnref2"><sup>2</sup></a>
5   </P>
6   <section class="footnotes">
7    <hr />
8    <ol>
9     <li id="fn1"><p>This is the first footnote.<a href="#fnref1" class\
10 ="footnote-back">↩︎</a></p></li>
11    <li id="fn2">
12      <p>Here's one with multiple paragraphy and code.</p>
13       <p>Indent paragraphy to include them in the footnote.</p>
14       <p><code>{my code}</code></p>
15       <p>Add as many paragraphs as you like.<a href="#fnref2" class="fo\
16 otnote-back">↩︎</a></p>
17      </li>
18    </ol>
19  </section>

Heading IDs

markdown

1 ### My Great Heading{custom-id}

HTML

1 <h3 id="custom-id">My Great Heading</h3>

Linking to Heading IDs

markdown

1 [Heading IDs](#heading-ids)

HTML

1 <a href="3heading-ids">Heading IDs</a>

Definition Lists

markdown

1 First Term
2 : This is the definition of the first term.
3 
4 Second Term
5 : This is one definition of the second term.
6 : This is another definition of the second term.

HTML

1 <dl>
2     <dt>First Term</dt>
3     <dd>This is the definition of the first term.</dd>
4     <dt>Second Term</dt>
5     <dd>This is one definition of the second term.</dd>
6     <dd>This is another definition of the second term.</dd>
7 </dl>

Stikethrough

markdown

1 The world is ~~flat~~ round.

HTML

1 <P>The world is <del>flat</del>round.</p>

Task Lists

markdown

1 - [X] Write the press release
2 - [ ] Update the website
3 - [ ] Contact the media

Automatic URL Linking

markdown

1 http://example.com

HTML

1 <a href="http://example.com">http://example.com</a>

Disabling Automatic URL Linking

markdown

1 `http://www.example.com`

HTML

1 `<code>`http://www.example.com`</code>`

5.Cheat Sheet

Basic Syntax

Element	Markdown Syntax
Heading	# H1
	## H2
	### h3
Bold	bold text
Italic	italicized text
Blockquote	> blockquote
Ordered List	1. First item
	2. Second item
	3.Third item
Unordered List	- First item
	- Second item
	- Third item
Code	code
Horizontal Rule	_ _ _
Link	title
Image	

Extended Syntax

Element	Markdown Syntax
Table	|Syntax|Description|
	|— | — |
	|Header | Title|
	|Paragraph|Text|
Fenced Code Block	```
	{
	“firstName”: “John”,
	“lastName”: “Smith”,
	“age”: 25
	}
	```
Footnote	Here’s a sentence with a footnote.[^1]
	[^1]:This is the footnote.
Heading ID	### My Great Heading {#custom-id}
Definition List	term
	: definition
Strikethrough	The world is flat.~
Task List	- [x] Write the press release
	- [ ] Update the website
	- [ ] Contact the media