In order to display the actual code of Markdown, the CSDN rich text editor is hereby used. The screenshots of the article are from the online Markdown website http://www.mdeditor.com/

What is Markdown?

Markdown is a lightweight markup language that can be used to add formatting elements to plain text documents. Markdown was created by John Gruber in 2004 and has now become one of the most popular markup languages in the world.
Using Markdown is different from using the WYSIWYG editor. In applications such as Microsoft Word, click a button to format words and phrases, and the changes are immediately visible. Markdown is not like that. When you create a file in Markdown format, you can add Markdown syntax to the text to indicate which words and phrases should look different.

Why use Markdown?

Markdown can be used for everything. People use it to create websites , documents , notes , books , presentations , emails and technical documents .
Markdown is portable. Almost any application can be used to open files containing Markdown formatted text. If you decide that you don't like the Markdown application you are currently using, you can import the Markdown file into another Markdown application. This is in sharp contrast to word processing applications such as Microsoft Word, which locks the text content into a proprietary file format.
Markdown is platform independent. You can create Markdown formatted text on any device running any operating system.
MarkDown is a proof of the future. Even if the application you are using will stop working at some point in the future, you can still use a text editing application to read text in Markdown format. This is an important consideration when it comes to books, university papers and other milestone documents that need to be kept indefinitely.
Markdown is everywhere. Sites such as Reddit and GitHub support Markdown, and many desktop and web-based applications support it.

Markdown

Markdown syntax format

Note: Using Markdown does not mean that you cannot use HTML. You can add HTML tags to any Markdown file. If you prefer certain HTML tags over Markdown syntax, this will be helpful. For example, some people find it easier to use HTML tags for images.

title

To create a title, use #the number sign () in front of a word or phrase. The number of numeric symbols you use should correspond to the heading level. E.g

Markdown	HTML	Render output
`# Heading level 1`	`<h1>Heading level 1</h1>`	Title level 1
`## Heading level 2`	`<h2>Heading level 2</h2>`	Title level 2
`### Heading level 3`	`<h3>Heading level 3</h3>`	Heading level 3
`#### Heading level 4`	`<h4>Heading level 4</h4>`	Heading level 4
`##### Heading level 5`	`<h5>Heading level 5</h5>`	Heading 5
`###### Heading level 6`	`<h6>Heading level 6</h6>`	Heading level 6

Or, on the line below the text, add any number of ==heading level 1 --characters or heading level 2 characters

Markdown	HTML	Render output
`Heading level 1 ===============`	`<h1>Heading level 1</h1>`	Title level 1
`Heading level 2 ---------------`	`<h2>Heading level 2</h2>`	Title level 2

paragraph

Create paragraphs so that blank lines separate one or more lines of text instead of using tabs or spaces. Of course, when deviating from other formats such as ordered lists and unordered lists, one or more lines need to be separated by blank lines.

Markdown HTML Render output

Markdown	HTML	Render output
`I really like using Markdown. I think I'll use it to format all of my documents from now on.`	`<p>I really like using Markdown.</p> <p>I think I'll use it to format all of my documents from now on.</p>`	I really like using Markdown. I think from now on, I will use it to format all documents.

I really like using Markdown.

 I think I'll use it to format all of my documents from now on.

<p>I really like using Markdown.</p>

 <p>I think I'll use it to format all of my documents from now on.</p>

I really like using Markdown.

I think from now on, I will use it to format all documents.

Focus on

Bold

To make text bold, add two asterisks or underscores before and after a word or phrase. To bold the middle of a word for emphasis, add two asterisks around the letters without spaces.

Markdown	HTML	Render output
`I just love bold text.`	`I just love <strong>bold text</strong>.`	I only like bold letters .
`I just love __bold text__.`	`I just love <strong>bold text</strong>.`	I only like bold letters .

Italic

To italicize text, add an asterisk or underscore before and after the word or phrase. To highlight the middle part of a word in italics, add an asterisk around the letter without spaces.

Markdown	HTML	Render output
`Italicized text is the cat's meow.`	`Italicized text is the <em>cat's meow</em>.`	Italic text is the cat's cry .
`Italicized text is the _cat's meow_.`	`Italicized text is the <em>cat's meow</em>.`	Italic text is the cat's cry .

Bold + italic

To highlight both bold and italicized text, add three asterisks or underscores before and after the word or phrase.

Markdown	HTML	Render output
`This text is *really important*.`	`This text is <strong><em>really important</em></strong>.`	This text is *really important* .
`This text is ___really important___.`	`This text is <strong><em>really important</em></strong>.`	This text is *really important* .

Block quote

To use block quotes, you can add a> before the paragraph

When using block quotes in multiple paragraphs, add> before each line

When nesting block quotes, add >> before the paragraph

> I am a block quote

>> I am a nested quote

> I am also a block quote

The rendering effect is as follows

block

Checklist

Ordered list

To create an ordered list, you only need to add numbers, dots and spaces (1.) before each item. You don’t need to ensure that the numbers are in order. Of course, you can also use tabs and indent four characters to nest

Markdown	HTML	Render output
`1. First item 2. Second item 3. Third item 4. Fourth item`	`<ol> <li>First item</li> <li>Second item</li> <li>Third item</li> <li>Fourth item</li> </ol>`	the first item second section the third item Fourth item
`1. First item 8. Second item 3. Third item 5. Fourth item`	`<ol> <li>First item</li> <li>Second item</li> <li>Third item</li> <li>Fourth item</li> </ol>`	the first item second section the third item Fourth item
`1. First item 2. Second item 3. Third item 1. Indented item 2. Indented item 4. Fourth item`	`<ol> <li>First item</li> <li>Second item</li> <li>Third item <ol> <li>Indented item</li> <li>Indented item</li> </ol> </li> <li>Fourth item</li> </ol>`	the first item second section the third item Indent Indent Fourth item

Unordered list

To create an unordered list, you can add a dash ( -), an asterisk ( *) or a plus sign ( +) in front of the order item , you can mix them, and finally they can all be rendered successfully. Indent one or more items to create nested lists.

Markdown	HTML	Render output
`* First item * Second item * Third item * Fourth item`	`<ul> <li>First item</li> <li>Second item</li> <li>Third item</li> <li>Fourth item</li> </ul>`	the first item second section the third item Fourth item
`+ First item * Second item - Third item + Fourth item`	`<ul> <li>First item</li> <li>Second item</li> <li>Third item</li> <li>Fourth item</li> </ul>`	the first item second section the third item Fourth item
`- First item - Second item - Third item - Indented item - Indented item - Fourth item`	`<ul> <li>First item</li> <li>Second item</li> <li>Third item <ul> <li>Indented item</li> <li>Indented item</li> </ul> </li> <li>Fourth item</li> </ul>`	the first item second section the third item Indent Indent Fourth item

Custom list

Some Markdown processors allow you to create custom lists and terms and their corresponding definitions. To create a definition list, type the term on the first line. On the next line, type a colon followed by a space and definition.

First Term
: This is the definition of the first term.

Second Term
: This is one definition of the second term.
: This is another definition of the second term.

渲染结果如下

First Term
This is the definition of the first term.

Second Term
This is one definition of the second term.
This is another definition of the second term.

如果你希望在列表中添加一些其他的东西，比如引用、代码、图片等，可以将该元素缩进四个空格或一个制表符，例如

Add to the list

代码

要将单词或短语表示为代码，请将其括在勾号（`），Esc下方的案件

如果要表示为代码的单词或短语包含一个或多个刻度线，可以通过将单词或短语括在双刻度线（``）中来对其进行转义。

请在代码块的每一行缩进至少四个空格或一个制表符，或者使用三个（`）包括

渲染效果如下

block

水平线

要创建水平线，可以单独在一行上使用三个或更多的星号（***），破折号（---）或下划线（___），所有这三个的渲染输出看起来都相同:

Horizontal line

链接

要创建链接，请将链接文本括在方括号（例如[Duck Duck Go]）中，然后立即在URL后面加上括号（例如(https://duckduckgo.com)）中的URL
可以选择为链接添加标题。当用户将鼠标悬停在链接上时，这将显示为工具提示。要添加标题，请将其括在URL后面的括号中
要将URL或电子邮件地址快速转换为链接，请将其括在尖括号中
为了强调链接，请在方括号和括号之前和之后添加强调语法

图片

要添加图像，请添加感叹号（!），然后在括号中添加替代文本，并在括号中添加图像资源的路径或URL。您可以选择在括号中的URL之后添加标题。
要向图像添加链接，请将图像的Markdown括在方括号中，然后在括号中添加链接。

转义字符

要显示原义字符，否则将用于设置Markdown文档中的文本格式\，可以在字符前面添加反斜杠（\）

可以使用反斜杠转义以下字符。

字符	名称
\	反斜杠
`	刻度线
*	星号
_	下划线
{}	大括号
[]	中括号
()	括号
#	井号
+	加号
-	减号（连字符）
.	点
!	感叹号
\|	管道

表格

要添加表，请使用三个或多个连字符（---）创建每列的标题，连字符的长度可以不用等长，并使用管道（|）分隔每列。可以选择在表的任一端添加管道。
可以通过:在标题行内的连字符的左侧，右侧或两侧添加一个冒号（:），以使列中的文本左，右或居中对齐
您可以格式化表格中的文本。例如，您可以添加链接、代码（仅在刻度线（`）中显示单词或短语，而不能在代码块中添加）和强调。不能添加标题，块引用，列表，水平规则，图像或HTML标签。

以上都是比较常用的，Markdown还可以用来绘制流程图、时序图、甘特图

这些复杂图形的绘制都是使用代码块实现的，指定代码块的解析语言，按照响应的绘制语法即可实现。

流程图——指定 mermaid（样式流程图）或 flow （标准流程图）解析语言
时序图——指定 sequence（标准时序图）或 mermaid（样式时序图）解析语言
甘特图——指定 mermaid 解析语言

流程图

graph 指定流程图方向：graph LR 横向，graph TD 纵向

元素的形状定义
1. id[描述] 以直角矩形绘制
2. id(描述) 以圆角矩形绘制
3. id{描述} 以菱形绘制
4. id>描述] 以不对称矩形绘制
5. id((描述)) 以圆形绘制
线条定义
1. A-->B 带箭头指向
2. A---B 不带箭头连接
3. A-.-B 虚线连接
4. A-.->B 虚线指向
5. A==>B 加粗箭头指向
6. A--描述---B 不带箭头指向并在线段中间添加描述
7. A--描述-->B 带描述的箭头指向
8. A-.描述.->B 带描述的虚线连指向
9. A==描述==>B 带描述的加粗箭头指向

实例

```mermaid
graph LR
    A(开始) -->B(起床)
    B --天气不好--- C>干活]
    C ==> D{休息时间到了}
    D -.yes.-> E((休息))
    D -.no.-> C
    E --> F(吃饭)

标准流程图

定义模块 id=>关键字: 描述 （“描述”的前面必须有空格，“=>” 两端不能有空格）

关键字：
1. start 流程开始，以圆角矩形绘制
2. opearation 操作，以直角矩形绘制
3. condition 判断，以菱形绘制
4. subroutine 子流程，以左右带空白框的矩形绘制
5. inputoutput 输入输出，以平行四边形绘制
6. end 流程结束，以圆角矩形绘制
定义模块间的流向：
1. 模块1 id->模块2 id ：一般的箭头指向
2. 条件模块id (描述)->模块id(direction) ：条件模块跳转到对应的执行模块，并指定对应分支的布局方向

实例

```flow
st=>start: 开始
ipt=>inputoutput: 输入一个x
op=>operation: 处理加工x+1
cond=>condition: 溢出（是或否？）
sub=>subroutine: 子流程
io=>inputoutput: 输出x
ed=>end: 结束

st->ipt->op->cond
cond(yes)->io->ed
cond(no)->sub->io->ed

时序图

标准时序图

Title:标题 ：指定时序图的标题
Note direction of 对象:描述 ：在对象的某一侧添加描述，direction 可以为 right/left/over ， 对象 可以是多个对象，以 , 作为分隔符
participant 对象 ：创建一个对象
loop...end ：创建一个循环体
对象A->对象B:描述 ：绘制A与B之间的对话，以实线连接
- -> 实线实心箭头指向
- --> 虚线实心箭头指向
- ->> 实线小箭头指向
- -->> 虚线小箭头指向

```mermaid
sequenceDiagram
Title:时序图示例
客户端->>服务端: 我想找你拿下数据 SYN
服务端-->>客户端: 我收到你的请求啦 ACK+SYN
客户端->>服务端: 我收到你的确认啦，我们开始通信吧 ACK
Note right of 服务端: 我是一个服务端
Note left of 客户端: 我是一个客户端
Note over 服务端,客户端: TCP 三次握手
participant 观察者
```

带样式时序图

基本语法同标准时序图，不同的是

需要使用 mermaid 解析，并在开头使用关键字 sequenceDiagram 指明
线段的样式遵循 mermaid 的解析方式
- -> ：实线连接
- --> ：虚线连接
- ->> ：实线箭头指向
- -->> ：虚线箭头指向

```mermaid
%% 时序图例子,-> 直线，-->虚线，->>实线箭头
  sequenceDiagram
    participant 张三
    participant 李四
    张三->王五: 王五你好吗？
    loop 健康检查
        王五->王五: 与疾病战斗
    end
    Note right of 王五: 合理 食物 <br/>看医生...
    李四-->>张三: 很好!
    王五->李四: 你怎么样?
    李四-->王五: 很好!
```

甘特图

使用 mermaid 解析语言，在开头使用关键字 gantt 指明
deteFormat 格式 指明日期的显示格式
title 标题 设置图标的标题
section 描述 定义纵向上的一个环节
定义步骤：每个步骤有两种状态 done（已完成）/ active（执行中）
- 描述: 状态,id,开始日期,结束日期/持续时间
- 描述: 状态[,id],after id2,持续时间
- crit ：可用于标记该步骤需要被修正，将高亮显示
- 如果不指定具体的开始时间或在某个步骤之后，将默认依次顺序排列

```mermaid
        gantt
        dateFormat  YYYY-MM-DD
        title 软件开发甘特图
        section 设计
        需求                      :done,    des1, 2014-01-06,2014-01-08
        原型                      :active,  des2, 2014-01-09, 3d
        UI设计                     :         des3, after des2, 5d
    未来任务                     :         des4, after des3, 5d
        section 开发
        学习准备理解需求                      :crit, done, 2014-01-06,24h
        设计框架                             :crit, done, after des2, 2d
        开发                                 :crit, active, 3d
        未来任务                              :crit, 5d
        耍                                   :2d
        section 测试
        功能测试                              :active, a1, after des3, 3d
        压力测试                               :after a1  , 20h
        测试报告                               : 48h
```

除此之外，Markdown还支持数学公式的插入，因为目前没有使用，没有整理

有兴趣的可以访问https://www.jianshu.com/p/e74eb43960a1，总结的很棒，以后也是学习数学公式的重点地址。

what? You still can't use Markdown? Come take a look