Markdown教程

写在前面

上上篇博文我说了要给大家写一篇VSCode的美化教程，因为实在太长了，所以可能会晚点出，预计周末左右能出，望大家谅解！

Markdown介绍

Markdown 是一种轻量级标记语言，创始人为约翰·格鲁伯（John Gruber）。 它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的 XHTML（或者HTML）文档。这种语言吸收了很多在电子邮件中已有的纯文本标记的特性。

由于 Markdown 的轻量化、易读易写特性，并且对于图片，图表、数学式都有支持，许多网站都广泛使用 Markdown 来撰写帮助文档或是用于论坛上发表消息。 如 GitHub、Reddit、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge、简书 等，甚至还能被使用来撰写电子书。

Markdown语法

标题

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

示例：

文本样式

*强调文本* _强调文本_

**加粗文本** __加粗文本__

==标记文本==

~~删除文本~~

> 引用文本

H~2~O is是液体。

2^10^ 运算结果是 1024。

示例：
强调文本 强调文本

加粗文本 加粗文本

标记文本

删除文本

引用文本

H₂O is是液体。

2¹⁰ 运算结果是 1024。

列表

无序列表
- 项目
  * 项目
    + 项目
有序列表
1. 项目1
2. 项目2
3. 项目3
多选框
- [ ] 计划任务
- [x] 完成任务

示例：
无序列表

• 项目
  • 项目
    • 项目
      有序列表

1. 项目1
2. 项目2
3. 项目3
   多选框

• 计划任务
• 完成任务

图片

图片: ![备注](图片路径)

带尺寸的图片: ![备注](图片路径 =60x60)

宽度确定高度等比例的图片: ![备注](图片路径 =60x)

高度确定宽度等比例的图片: ![备注](图片路径 =x60)

居中的图片: ![备注](图片路径#pic_center)

居中并且带尺寸的图片: ![备注](图片路径#pic_center =60x60)

居右的图片: ![备注](图片路径#pic_right)

图片:

带尺寸的图片:

宽度确定高度等比例的图片:

高度确定宽度等比例的图片:

居中的图片:

居中并且带尺寸的图片:

居右的图片:

链接

链接: [链接提示](网址)

示例：
链接: CSDN社区

代码片

下面展示一些 `内联代码片`。
``´
// A code block
var foo = 'bar';
``´

```javascript
// An highlighted block
var foo = 'bar';

示例：
下面展示一些 内联代码片。

// A code block
var foo = 'bar';

// An highlighted block
var foo = 'bar';

表格

项目     | Value
-------- | -----
电脑  | $1600
手机  | $12
导管  | $1

|Column 1| Column 2|Column 3|
|:--------:| -------------:|:-----------|
|文本居中 |文本居右 |文本居左|

示例：

项目	Value
电脑	$1600
手机	$12
导管	$1

Column 1	Column 2	Column 3
文本居中	文本居右	文本居左

注脚

一个具有注脚的文本。[^1]

[^1]: 注脚的解释

示例：
一个具有注脚的文本。¹

注释

Markdown将文本转换为 HTML。

*[HTML]:   超文本标记语言

示例：
Markdown将文本转换为 HTML。

自定义列表

Markdown
:  Text-to-HTML conversion tool

Authors
:  John
:  Luke

示例：

Markdown

Text-to- HTML conversion tool

Authors

John

Luke

LaTeX数学公式 （玩不懂）

Gamma公式展示 $\Gamma(n) = (n-1)!\quad\forall
n\in\mathbb N$ 是通过 Euler integral

$$
\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.
$$

示例：
Gamma公式展示 $\Gamma (n)=(n-1)!\forall n\in \mathbb{N}$ 是通过 Euler integral

$$\Gamma (z)={\int }_0^{\infty }{t}^{z-1}{e}^{-t}dt.$$

甘特图

```mermaid
gantt
        dateFormat  YYYY-MM-DD
        title Adding GANTT diagram functionality to mermaid
        section 现有任务
        已完成               :done,    des1, 2014-01-06,2014-01-08
        进行中               :active,  des2, 2014-01-09, 3d
        计划中               :         des3, after des2, 5d
``´

示例：

UML图

```mermaid
sequenceDiagram
张三 ->> 李四: 你好！李四, 最近怎么样?
李四-->>王五: 你最近怎么样，王五？
李四--x 张三: 我很好，谢谢!
李四-x 王五: 我很好，谢谢!
Note right of 王五: 李四想了很长时间, 文字太长了<br/>不适合放在一行.

李四-->>张三: 打量着王五...
张三->>王五: 很好... 王五, 你怎么样?
``´

示例：

Flowchart流程图

```mermaid
flowchat
st=>start: 开始
e=>end: 结束
op=>operation: 我的操作
cond=>condition: 确认？

st->op->cond
cond(yes)->e
cond(no)->op
``´

示例：

类图

```mermaid
classDiagram
    Class01 <|-- AveryLongClass : Cool
    <<interface>> Class01
    Class09 --> C2 : Where am i?
    Class09 --* C3
    Class09 --|> Class07
    Class07 : equals()
    Class07 : Object[] elementData
    Class01 : size()
    Class01 : int chimp
    Class01 : int gorilla
    class Class10 {
        >>service>>
        int id
        size()
    }
``´

示例：

目录

@[TOC](这里写目录标题)
# 一级目录
## 二级目录
### 三级目录

示例：

---

1. 注脚的解释 ↩︎