Markdown教程
Markdown标题
四级标题（效果演示）
五级标题 （效果演示）
标题级数根据前面的井号数量来决定
Markdown段落
粗斜体与*/_
*斜体文本*
**粗体文本**
***粗斜体文本***
_斜体_
__粗体__
___粗斜体___
斜体文本
粗体文本
粗斜体文本
斜体
粗体
粗斜体
分隔符
一行中使用三个以上的 * 或者 - 来建立分隔符 如下图所示（不能有任何其他的东西）
删除线
如果段落上的文字要添加删除线，只需要在文字的两端加上两个波浪线~~
~~删除我崽种~~
删除我崽种
下划线
类似html的超文本编辑器
脚注[^]
脚注是对文本的补充说明，Markdown脚注的格式如下：
王竞1
文本补充2
Markdown列表
无序列表（*/+/-）
- *第一
- 直接回车接下一个
- 按两下回车取消
有序列表（1.2.3.）
- 序号+.+空格+原文内容
- 回车接下一个
- 两下回车取消
嵌套序列
- 第一个：
- 1.1要先把大项排好，然后再来排小项
- 1.2否则会出现大小项排列不整齐的状况
- 第二个：
- 2.1 差不多就是这么个意思
- 2.2 第二项嵌套的第二个元素
Markdown区块
Markdown区块引用是在段落开头使用>符号，然后后面紧跟一个空格符号：
区块应用第一层
回车继续
双击回车取消
区块可以嵌套，一个>符号是最外层，两个>是第一层，以此类推：
第一层
第五层
大气层
焦建容是屎粑粑
区块中使用列表：
- 第一项
- 第二项
哈哈
草
嘿嘿
- 唔唔
列表中使用区块：
-
第一项
菜鸟教程
学的不仅是技术更是梦想
-
第二项
Markdown代码
代码片段
如果是段落上的一个函数过片段的代码可以用反引号把它抱起来“ ` ”，列入：
printf()函数
代码区块
代码区块使用4个空格或者一个Tab：
<!--在Typora中4个空格或者一个TAB貌似并不适用-->
<!--但可以使用快捷键CTRL+SHIFT+K快捷键来表明代码区块-->
也可以使用```来包裹一段代码，并指定一种语言（也可以不指定）
include <iostream>
using namespace std;
void main(){
cout<<"Hello world!";
}
$(document.ready(function(){
alert('RUNOOB');
});
Markdown链接
普通链接
链接使用方法如下：
[链接名称](链接地址)
或者
<链接地址>
列如：
这是我的B站空间
高级链接
我们可以通过变量来设置一个链接，变量赋值在文档末尾进行（类似于脚注）
这个链接用 1 作为网址变量[Google][1]
这个链接用 bili 作为网址变量[Bilibili][bili]
然后再文档的结尾变量赋值（网址）
[1]:www.google.com
[bili]:www.bilibili.com
显示结果如下：
这个链接用 1 作为网址变量Google
这个链接用 B 作为网址变量[Bilibili][bili]
然后再文档的结尾变量赋值（网址）
Markdown图片
基本操作
Markdown 图片语法格式如下：
- 开头一个感叹号
- 标题选填
使用实例：
效果展示：
同样可以使用变量来代替地址栏内容3。
高级技巧
图片尺寸
Markdown无法指定图片的高度与宽度，这里可以使用<img>标签
<img src="https://i-blog.csdnimg.cn/blog_migrate/5999ac8ead0b05e23a371f63fe24fd1e.png" width="50%">
效果如下：
本地图片
路径直插法
只需要在基础语法的括号中填入图片的位置路径即可，支持绝对路径和相对路径。
例如：
在Typora中，输入图片名后会自动弹出路径选择框。
- 优点：快捷方便，在类似CSDN的社区插入本地图片后会自动生成链接。
- 缺点：本地图片的路径更改或丢失都会造成Markdown文件调不出图片。
Base64转码法
用base64转码工具把图片转成一段字符串4，然后把字符串填入基础格式中。
- 优点：图片的加载不会受到网络影响，加载速度非常快。
- 缺点：操作繁琐，得到的64转码字符串过长，也不是每一张图片都能成功。
本地转网络法
通过一系列手段将本地图片上传至网络，然后再贴网址。比如CSDN发布文章时，所选的本地图片会自动生成一个链接。或者通过有道云之类的手段手动将图片变成单个链接。
Markdown表格
语法格式
Markdown制作表格使用|5来分隔不同的单元格，使用-5来分割表头和其他行。
语法格式如下：
| 表头 | 表头 |
| ---- | ---- |
| 单元格 | 单元格 |
| 单元格 | 单元格 |
显示结果如下：
| 表头 | 表头 |
|---|---|
| 单元格 | 单元格 |
| 单元格 | 单元格 |
对齐方式
我们可以设置表格的对齐方式：
-:设置内容和标题栏居右对齐。:-设置内容和标题栏居左对齐。:-:设置内容和标题栏居中对齐。
实例如下：
|左对齐|居中|右对齐|
|:----|:----:|----:|
|1|0|1|
|1|0|1|
显示结果如下：
| 左对齐 | 居中 | 右对齐 |
|---|---|---|
| 1 | 0 | 1 |
| 1 | 0 | 1 |
Markdown高级技巧
支持HTML元素
不在Markdown涵盖范围之内的标签，都可以直接在文档里面用HTML撰写。
目前支持的HTML元素有：<kbd> <b> <i> <sup> <sub> <br> 等
使用 <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>K</kbd> 使用代码区块快捷键。
使用 <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd> 重启电脑
使用 Ctrl+Shift+K 使用代码区块快捷键。
使用 Ctrl+Alt+Del 重启电脑。
| 标签 | 作用 |
|---|---|
| <kbd> | 定义键盘文本 |
| <b> | 粗体文本 |
| <i> | 斜体 |
| <sub> | 下标下 |
| <sup> | 上标上 |
<br> | 文本末尾自动换行 |
转义
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)}}
$$
输出结果为：
实例
以下几个实例效果图如下：
横向流程图：
```mermaid
graph LR
A[方形] -->B(圆角)
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| E[结果2]
F[竖向流程图]
```
标准流程图：
```mermaid
flowchat
st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->op
```
标准流程图（横向）：
```mermaid
flowchat
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时序图：
```mermaid
sequenceDiagram
对象A->>对象B: 对象B你好吗?（请求）
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->>对象A: 我很好(响应)
对象A->>对象B: 你真的好吗？
```
UML时序图(复杂)：
```mermaid
sequenceDiagram
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: 没人陪我玩
```
UML标准时序图：
```mermaid
%% 时序图例子,-> 直线，-->虚线，->>实线箭头
sequenceDiagram
participant 张三
participant 李四
张三->王五: 王五你好吗？
loop 健康检查
王五->王五: 与疾病战斗
end
Note right of 王五: 合理 食物 <br/>看医生...
李四-->>张三: 很好!
王五->李四: 你怎么样?
李四-->王五: 很好!
```
甘特图：
```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
```
%% 语法示例
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
扫一扫
4037
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
