# markdown 使用文档

**Repository Path**: yyxiaowei/markdown_learning

## Basic Information

- **Project Name**: markdown 使用文档
- **Description**: 学习资料-Markdown
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-11-09
- **Last Updated**: 2023-02-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Markdown 标题

**使用 `#` 号标记**

> \# 一级标题
>
> \#\# 二级标题
>
> \#\#\# 三级标题
>
> ...
>
> \#\#\#\#\#\# 六级标题

#  Markdown 列表

## 1. 无序列表

**无序列表使用星号 `*`,加号 `+` ,或是 `-` 号作为列表标记**

> \* 第一项
>
> \* 第二项
>
> \+ 第一项
>
> \+ 第二项
>
> \- 第一项
>
> \- 第二项  

使用效果如下:

* 第一项
* 第二项

+ 第一项

- 第二项

- 第一项
- 第二项

## 2. 有序列表

有序列表使用__数字__并加上`.`号来表示

1. 
2. 

## 3. 列表嵌套

1. 第一项
    - 子项
2. 第二项
    - 子项

# Markdown 区块

Markdown区块引用是在段落开头使用 __`>`__ 符号跟一个__空格__

> \> 区块引用
>
> \> Mackdown使用文档

使用结果如下:

> 区块引用
>
> Mackdown使用文档

# Markdown 代码

如果是段落上的一个函数或片段或以用反引号把它包起来`` `例如: 

> \`print f()\`函数

显示结果如下:

`print f()函数`

代码区块可使用` ``` `一种语言(也可以不指定).实例如下:

```python
print('this is python')
```

> \`\`\`python
>
> def python_fn():
>
> ​	pass

显示结果如下:

```python
def python_fn():
  pass
```

# Markdown 链接

**链接使用方法如下:**

> [ 链接名称 ] (链接地址)
>
> 或者
>
> <链接地址>

例如:

> 这是一个链接 \[菜鸟教程\]\(https://www.runoob.com\)

显示结果如下:

​	这是一个链接 [菜鸟教程](https://www.runoob.com)

**直接使用链接地址:**

> \<https://www.runoob.com>

显示结果如下

<https://www.runoob.com>

**高级链接**

我们要吧通过变量来设置一个链接,变量赋值在文档末尾进行:

> 这个链接用  1  作为网址变量 \[百度]\[1\]
>
> 这个链接用  runoob  作为网址变量 \[Runoob\] \[runoob\]
>
> 然后在文档的结尾为变量赋值 (网址)
>
>   \[1\]: http://www.baidu.com/
>
>   \[runoob\]: http://www.runoob.com

显示结果如下:

​    	这个链接用  1  作为网址变量 [百度][ 1 ] 

​		这个链接用  runoob  作为网址变量 [Runoob][runoob]

[ 1 ]:http://www.baidu.com/
[runoob]:http://www.runoob.com/

# Markdown 图片

Markdown语法格式如下:

> \!\[alt 属性文本\](图片地址)
>
> \!\[alt 属性文本\]\(图片地址 "可选标题")

- 开头一个感叹号`!`
- 接着一个方括号,里面放上图片的替代文字
- 接着一个普通括号,里面放上图片的地址,最后还可以用引号包住并加上选择性的 'title' 属性的文字。 

使用实例:

> \!\[RUNOOB 图标]\(http://static.runoob.com/images/runoob-logo.png\)

使用结果如下

![百度首页图片](http://static.runoob.com/images/runoob-logo.png "RUNOOB")

也可以像网址那样对图片网址使用变量

这个链接  runoob 作为图片网址变量[RUNOOB][runbbo]

[runbbo]:http://static.runoob.com/images/runoob-logo.png

如果需要指定图片的其它样式,可以使用html的img标签

> \<img src="http://static.runoob.com/images/runoob-logo.png" width="50%" \>

使用结果如下:

<img src="http://static.runoob.com/images/runoob-logo.png" width="50%" >

# Markdown 表格

Mark制作表格使用`|`来分隔不同的单元格,使用`-`来分隔表头和其它行

语法格式如下

> \| 表头 \| 表头 \|
>
> \|  -----  \|   ---- \|
>
> \| 单元格\|单元格\|
>
> \|单元格\|单元格\|

以上代码显示结果如下:

| 表头1  | 表头2  | 表头3 |
| :----: | :----: | :---: |
| 单元格 | 单元格 |       |

# Markdown字体变色

> \\$color\{red}{要变色的内容}​\$

使用效果如下:

$\color{red}{要变色的内容}$

句子颜色个性

> \$\color{#FF0000}{红}$ $\color{#FF7D00}{橙}$ $\color{#FFFF00}{黄}$ $\color{#00FF00}{绿}$  $\color{#0000FF}{蓝}$ $\color{#00FFFF}{靛}$ $\color{#FF00FF}{紫}\$ 

使用效果如下

$\color{#FF0000}{红}$ $\color{#FF7D00}{橙}$ $\color{#FFFF00}{黄}$ $\color{#00FF00}{绿}$  $\color{#0000FF}{蓝}$ $\color{#00FFFF}{靛}$ $\color{#FF00FF}{紫}$ 

# Markdown 高级技巧

## 支持的HTML元素

不在Markdown涵盖范围之内的标签,都可以直接在文档里面用HTML标签撰写

> 使用<kbd\>Command\</kbd\>+\<kbd\>R\</kbd\>刷新网页

使用效果如下:

使用<kbd>Command</kbd>+<kbd>R</kbd>刷新网页

## 转义符号

Markdown使用了许多特殊的符号来表示特定的意义,如果需要使用特殊的符号则需要使用转义字符,Markdown使用`\`反斜杠转义特殊字符

> \*\*文本加粗\*\*
>
> \\\*\\\* 正常显示星号  \\\*\\\* 

输入结果为:

> **文本加粗**
>
> \*\*正常显示星号\*\*

Markdown支持以下这些符号前面加上反斜杠来帮助插入普通的符号:

>\\ 反斜线
>
>\` 反引号
>
>\* 星号
>
>\_下划线
>
>\{\} 花括号
>
>\[\] 方括号
>
>\() 小括号
>
>\# 井字号
>
>\+ 加号
>
> \- 减号
>
>\. 英文句点
>
>\! 感叹号

## 公式

当你需要在编辑器中插入数学公式时，可以使用两个美元符 $$ 包裹 TeX 或 LaTeX 格式的数学公式来实现。提交后，问答和文章页会根据需要加载 Mathjax 对数学公式进行渲染。如：

> \$$
>
> \\mathbf\{V}\_1 \times \mathbf\{V}\_2 = \\begin\{vmatrix}
>
> \\mathbf\{i} & \\mathbf\{j} & \\mathbf\{k} \\\
>
> \\frac{\partial X}{\partial u} &  \frac{\partial Y}{\partial u} & 0 \\\	
>
> \\frac{\partial X}{\partial v} &  \frac{\partial Y}{\partial v} & 0 \\\
>
> \\end{vmatrix}
>
> \${$tep1}{\style{visibility:hidden}{(x+1)(x+1)}}
>
> \$$

输出结果为:


$$
\mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix}

\mathbf{i} & \mathbf{j} & \mathbf{k} \\

\frac{\partial X}{\partial u} &  \frac{\partial Y}{\partial u} & 0 \\	

\frac{\partial X}{\partial v} &  \frac{\partial Y}{\partial v} & 0 \\

\end{vmatrix}

${$tep1}{\style{visibility:hidden}{(x+1)(x+1)}}
$$

## Typora画图

### 横向流程图

> \```mermaid
>
> graph LR
>
> A[方形] -->B(圆角)
>
> ​		B --> C{条件a}
>
> ​		C --> |a=1| D[结果]
>
> ​		C --> |a=2| E[结果2]
>
> ​		F[横向流程图]
>
> \```

```mermaid
graph LR
A[方形] -->B(圆角)
A[方形] -->G(圆角)
	B --> C{条件a}
    C -->|a=1| D[结果1]
    C -->|a=2| E[结果2]
    F[横向流程图]
```

### 竖向流程图

> \```mermaid
>
> graph TD
>
> A[方形] --> B(圆角)
>
> ​		B  --> C{条件a}
>
> ​		C --> |a = 1| D[结果1]
>
> ​		C --> |a = 2| D[结果2]
>
> ​		F[竖向流程图]

```mermaid
graph TD
A[方形] --> B(圆角)
		B --> C{条件a}
		C --> |a=1| D[结果1]
		C --> |a=2| D[结果2]
		F[竖向流程图]
```

### 标准流程图

> \```flow
>
> st=>start:  开始框
>
> op=>operation: 处理框
>
> cond=>condition: 判断框(是或否?)
>
> sub1=>subroutine: 子流程
>
> io=>inputoutput: 输入输出框
>
> e=>end: 结束框
>
> st->op->cond
>
> cond(yes)->io->e
>
> cond(no)->sub1(right)->op
>
> \```

```flow
st=>start:  开始框

op=>operation: 处理框

cond=>condition: 判断框(是或否?)

sub1=>subroutine: 子流程

io=>inputoutput: 输入输出框

e=>end: 结束框

st->op->cond

cond(yes)->io->e

cond(no)->sub1(right)->op
```

### 标准流程图 (横向)

> \```flow
>
> st=>start:  开始框
>
> op=>operation: 处理框
>
> cond=>condition: 判断框(是或否?)
>
> sub1=>subroutine: 子流程
>
> io=>inputoutput: 输入输出框
>
> e=>end: 结束框
>
> st(right)->op(right)->cond
>
> cond(yes)->io(bottom)->e
>
> cond(no)->sub1(right)->op
>
> \```

```flow
flow

st=>start:  开始框

op=>operation: 处理框

cond=>condition: 判断框(是或否?)

sub1=>subroutine: 子流程

io=>inputoutput: 输入输出框

e=>end: 结束框

st(right)->op(right)->cond

cond(yes)->io(bottom)->e

cond(no)->sub1(right)->op
```

### UML时序图样例

>\```sequence
>
>对象A->对象B: 对象B你好吗? (请求)
>
>Note right of 对象B: 对象B的描述
>
>Note left of 对象A: 对象A的描述(提示)
>
>对象B-->对象A: 我很好(响应)
>
>对象A->对象B: 你真的好吗?
>
>\```

```sequence
对象A->对象B: 对象B你好吗? (请求)

Note right of 对象B: 对象B的描述

Note left of 对象A: 对象A的描述(提示)

对象B-->对象A: 我很好(响应)

对象A->对象B: 你真的好吗?
```

### UML时序图复杂样例

> \```sequence
>
> Title: 标题: 复杂使用
>
> 对象A->对象B: 对象B你好吗? (请求)
>
> Note right of 对象B: 对象B的描述
>
> Note left of 对象A: 对象A的描述(提示)
>
> 对象B-->对象A: 我很好(响应)
>
> 对象B->小三: 你好吗?
>
> 小三-->>对象A: 对象B找我了
>
> 对象A->对象B: 你真的好吗?
>
> Note over 小三,对象B: 我们是朋友
>
> Participant C
>
> Note right of C: 没人陪我玩
>
> \```

```sequence
Title: 标题: UML复杂使用

对象A->对象B: 对象B你好吗? (请求)

Note right of 对象B: 对象B的描述

Note left of 对象A: 对象A的描述(提示)

对象B->对象A: 我很好(响应)

对象B->小三: 你好吗?

小三-->>对象A: 对象B找我了

对象A->对象B: 你真的好吗?

Note over 小三,对象B: 我们是朋友

Participant C

Note right of C: 没人陪我玩
```

### UML标准时序图样例

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

```mermaid
%% 时序图例子,->直线,-->虚线, ->>实线箭头

	sequenceDiagram
  	participant 张三
    participant 李四
    张三->王五: 王五你好吗？
    loop 健康检查
        王五->王五: 与疾病战斗
    end
    Note right of 王五: 合理饮食 <br/>看医生...
    李四-->>张三: 很好!
    王五->>李四: 你怎么样?
    李四-->>王五: 很好!
```

### 甘特图样例

> \```mermaind
>
> %% 语法示例
> 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
>
> \```		



```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
```