Markdown 入门一览

可直接将本文内容保存为.md后缀的文本文件,使用下面的环境打开,查看各语法的实际效果。
菜鸟必备网站: [菜鸟教程](https://www.runoob.com/markdown/md-tutorial.html) 转载整理成文
markdown环境:vscode + Markdown Preview Enhanced + Markdown PDF
vscode:https://code.visualstudio.com/

Markdown Preview Enhanced: https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced
Ctrl+P打开vscode命令行,输入:>Markdown: Open Preview to the Side打开vscode的markdown实时预览

Markdown PDF : https://marketplace.visualstudio.com/items?itemName=yzane.markdown-pdf
markdown文件转pdf文件。

标题有两种格式  
1.使用=和-标记一级标题和二级标题  

展示一级标题  
==============  
展示二级标题  
--------------  
********
2.使用#表示1-6级标题  
# 一级标题  
## 二级标题  
### 三级标题  
#### 四级标题  
##### 五级标题  
###### 六级标题  

*******
### 段落标记  
段落换行是行末尾两个以上的空格加回车  
### 字体
*斜体文本*  
_斜体文本_  
**粗体文本**  
__粗体文本__  
***粗斜体文本***  
___粗斜体文本___  
### 分割线  
在一行中用三个以上的星号、减号、底线来建立一个分割线,行内不能有其他东西。可以在星号或者减号间插入空格
***
* * *
*****
- - -
-----
___
### 删除线  
~~GOOLE.COM~~  
### 下划线  
<u>带下划线文字</u>  
### 脚注  
创建脚注格式类似这样[^注1].  

[^注1]: 2022年2月25日.  

### 列表  
支持有序列表和无序列表  
无序列表使用星号(*)、加号(+)或者减号(-)作为列标记,这些标记后面要添加一个空格然后填写内容。
* 第一项
* 第二项
+ 第一项
+ 第二项
- 第一项
- 第二项  

有序列表使用数字并加上.号来表示  
1. 第一项
2. 第二项  

### 列内嵌套  
列表嵌套只需要子列表中的选项前面添加四个空格即可:  
1. 第一项:  
    - 第一项嵌套的第一个元素  
    - 第一项嵌套的第二个元素  
2. 第二项:  
    - 第二项嵌套的第一个元素  
    - 第二项嵌套的第二个元素  

### 区块  
markdown 区块引用时在段落开头使用>符号,然后紧跟一个空格符号:  
> 区块引用  
> 区块2  
嵌套区块,一个>符号时最外层,两个>符号是第一层嵌套,以此类推:  

> 最外层  
>> 第一层嵌套  
>>> 第二层嵌套

区块中使用列表:  
> 区块中使用列表
> 1. 第一项
> 2. 第二项
> + 第一项
> + 第二项
> + 第三项

列表中使用区块:
在列表项目内放进区块,需要在>符号前添加四个空格的缩进    
* 第一项
    > 第一节  
    > 第二节
* 第二项  

### markdown 代码
如果是段落上的一个函数或者片段的代码可以用反引号把它包起来('),例如:  
`printf()` 函数  

**代码区块**:  
使用三个反引号(```)将代码块包含起来.  
```
    #include ""
```
### markdown 链接  
链接使用方法如下:  
[链接名称](链接地址)  
或者  
<链接地址>  
例如: 这是官网链接 [runoob官网](https://www.runoob.com/)  
或者:<https://www.runoob.com/>  
高级链接  
可以通过变量来设置一个链接,变量复制在文档末尾进行:  
这个链接用 runoob 作为网址变量[官网][runoob]  
然后再文档的结尾变量赋值

[runoob]: https://www.runoob.com/

### markdown 图片  
图片语法格式如下:  
![alt 属性文本](图片地址)  
![alt 属性文本](图片地址 "可选标题")  
* 开头一个感叹号
* 接着一个方括号,里面放图片的替代文字
* 接近一个普通括号,里面放上图片的网址,最后还可以用引号包住并加上选择性的'title' 属性的文字。  

![RUNOOB 图标](http://static.runoob.com/images/runoob-logo.png "RUNOOB")  
对图片网址使用变量  
这个链接用 1 作为网址变量 [RUNOOB][1].  
然后在文档的结尾为变量赋值(网址)

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

### markdown 表格  
> 制作表格使用|来分隔不同单元格,使用-来分隔表头和其他行.  
> 语法格式如下:  
>
> | 表头  | 表头 |
> | ---- | ---- |
> | 单元格  | 单元格 |
> | 单元格  | 单元格 |

> 对齐方式  
> * -:设置内容和标题栏居右对齐.
> * :-设置内容和标题栏居左对齐.
> * :-:设置内容和标题栏居中对齐.  

> | 左对齐 | 右对齐 | 居中对齐|
> | :-----| ----: | :----: |
> | 单  | 单 | 单 |
> | 单  | 单 | 单 |


### 高级技巧  
* **支持的HTML元素**  
不在 Markdown 涵盖范围之内的标签,都可以直接在文档里面用 HTML 撰写。目前支持的 HTML 元素有:\<kbd> \<b> \<i> \<em> \<sup> \<sub> \<br>等,  
如: 使用 <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd> 重启电脑.  

* **转义**  
Markdown 使用了很多特殊符号来表示特定的意义,如果需要显示特定的符号则需要使用转义字符,Markdown 使用反斜杠转义特殊字符.  例如:  
**文本加粗**  
\*\* 文本加粗 \*\*  

* Markdown 支持以下这些符号前面加上反斜杠来帮助插入普通的符号:  
    > ```
    > \   反斜线
    > `   反引号
    > *   星号
    > _   下划线
    > {}  花括号
    > []  方括号
    > ()  小括号
    > #   井字号
    > +   加号
    > -   减号
    > .   英文句点
    > !   感叹号
    > ```
* 公式  
Markdown Preview Enhanced 使用 KaTeX 或者 MathJax 来渲染数学表达式。
KaTeX 拥有比 MathJax 更快的性能,但是它却少了很多 MathJax 拥有的特性。你可以查看 KaTeX supported functions/symbols 来了解 KaTeX 支持那些符号和函数。
默认下的分隔符:  
    * \$...\$ 或者 \(...\) 中的数学表达式将会在行内显示。
    * \$\$...\$\$ 或者 \[...\] 或者 ```math 中的数学表达式将会在块内显示。
    > $f(x) = sin(x) + 12 $
    > $$\sum_{n=1}^{100} n $$
    > $$
    > \begin{Bmatrix}
    >    a & b \\
    >    c & d
    > \end{Bmatrix}
    > $$
    > $$
    > \begin{CD}
    >    A @>a>> B \\
    > @VbVV @AAcA \\
    >    C @= D
    > \end{CD}
    > $$

* 流程图  
在 Markdown 中,定义一个 Markdown流程图 大致分为两段,第一段是定义元素,第二段是定义元素之间的走向。  
Markdown流程图语法:  
>定义元素:  
`tag=>type: content:>url`  
tag: 元素名字。  
type: 是这个元素的类型。  
    >>1. start : 开始
    >>2. end : 结束
    >>3. operation : 操作
    >>4. subroutine : 子程序
    >>5. condition : 条件
    >>6. inputoutput: 输入或产出  

>连接元素:  
c2(yes)->io->e  
c2(no)->op2->e  
用 -> 来连接两个元素。需要注意的是 condition 类型,有 yes 和 no 两个分支。

使用 typora 画流程图、时序图(顺序图)、甘特图  
1. 横向流程图源码格式:  
    >```mermaid
    >graph LR
    >A[方形] -->B(圆角)
    >    B --> C{条件a}
    >    C -->|a=1| D[结果1]
    >    C -->|a=2| E[结果2]
    >    F[横向流程图]
    >```
2. 竖向流程图源码格式:  
    >```mermaid
    >graph TD
    >A[方形] --> B(圆角)
    >    B --> C{条件a}
    >    C --> |a=1| D[结果1]
    >    C --> |a=2| E[结果2]
    >    F[竖向流程图]
    >```
3. 标准流程图源码格式:  
    >```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
    >```  
4. 标准流程图源码格式(横向):
    >```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
    >```
5. UML时序图源码样例:  
    >```sequence
    >对象A->对象B: 对象B你好吗?(请求)
    >Note right of 对象B: 对象B的描述
    >Note left of 对象A: 对象A的描述(提示)
    >对象B-->对象A: 我很好(响应)
    >对象A->对象B: 你真的好吗?
    >```
6. 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: 没人陪我玩
    >```
7. UML标准时序图样例:  
    >```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
    >```
8. 甘特图样例:
    >```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
    >```
posted @ 2022-02-25 12:14  hsqcarter  阅读(63)  评论(0编辑  收藏  举报