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 图片
图片语法格式如下:


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

对图片网址使用变量
这个链接用 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
>```
分类:
开发工具使用问题汇总
标签:
Markdown
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库