Markdown基本语法

2023-11-19

Markdown基本语法

这是本人首次学习Markdown，为了巩固学习成果，所以写下这篇博客

一、Markdown了解

Markdown是一种轻量级标记语言，可以用来编写帮助文档，可导出为HTML、PDF等多种格式文档。
Markdown内联HTML语法，即Markdown没有的标签，可以使用HTML标签替代
本地可以使用Typora编辑器来书写Markdown，Typora官网

二、基本语法

1. 各级标题的写法

几级标题就在标题名称之前写几个 #

标题	写法
一级标题	#空格+标题名称，如：# 一级标题或源码模式下使用`=`标记，如：一级标题，回车，`=`
二级标题	##空格+标题名称，如：## 二级标题或源码模式下使用`-`标记，如：一级标题，回车，`-`
三级标题	###空格+标题名称，如：### 三级标题
四级标题	####空格+标题名称，如：#### 四级标题
五级标题	#####空格+标题名称，如：##### 五级标题
六级标题	######空格+标题名称，如：###### 六级标题

具体效果如下：

2. 段落

Markdown段落就是直接在文本末尾添加两个以上空格，然后按回车就会被定义为一个段落，他与直接不要空格回车的区别：在源代码模式下段落末尾有个向下的箭头，直接回车没有

3.字体样式

样式	写法
粗体	内容或 __ 内容 __，注意：不能有空格
斜体	* 内容 * 或 _ 内容 _，注意：不能有空格
粗斜体	** * 内容 *** 或 __ _ 内容 ___，注意：不能有空格
删除	~~ 内容 ~~，注意：不能有空格
其他	使用HTML标签元素

4.分隔线

使用连续三个以上的 * 或-或_来得到分隔线

分隔线

5.下划线

由于Markdown中没有下划线，所以只能使用HTML的

下划线

6.脚注

脚注是对正文中某个词或句子的补充说明（解释），一般位于页面的底部

格式：需要解释说明的词或句子[ ^脚注名称 ]，然后在页面的底部写上：[ ^相对应的脚注名称]:脚注解释，注意：要使用英文字符

实例演示：

7.列表

类型	格式
有序列表	输入数字加`.`，然后空格
无序列表	在`*`、`-`、`+`后加空格

列表的使用方式：

单独使用

有序列表和无序列表相互嵌套

使用其他的 Markdown 语法，包括标题、字体样式、引用、代码区块等，其中代码块必须在列表最前面或者另起一行，否者不显示

在输入数字时，如果数字后面有.，则点后面不能跟空格，否则默认为是列表，如果一定要在.后面加空格，可以在每个.前面加上\，如：1\.116\.9\.164—>1.116.9.164

示例：

8.代码块

对程序员来说这个功能是必不可少的，有时候我们需要插入一些代码，就可以使用代码块,代码块的写法有四种，记得使用英文状态下的字符

类型	格式
标识一个函数或片段的代码	使用单个反引号包裹：``
多行代码	连续输入三个反引号，后面加上要使用的语言
在源码中使用tab或四个空格	这种方式只能在源码中输入
直接输入HTML语句	由于Markdown内联HTML，所以直接写HTML语句会被识别为HTML代码块

效果如下：

代码块

9.引用

在文本前面输入>，然后空格，引用也可以嵌套使用，在大于号后边再输入大于号就可以，另外，引用也可与标题、列表、代码区块等嵌套

示例：

10.图片插入

在需要插入图片的地方输入![图片描述] (图片路径)，注意：中间不能留空格，图片描述只在图片加载不出来时显示，可省略

示例：

图片插入

11.链接

在Markdown中，链接有三种写法

方式	写法
常规写法	[链接名称] (链接地址)
直接写链接地址	<链接地址>
通过变量来设置一个链接，在文档末尾为变量赋值	[链接名称] [变量名]，记得为变量赋值

示例：

12.表格

Markdown 制作表格使用 | 来分隔不同的单元格，使用减号 - 来分隔表头和其他行。

语法格式如下：

| 姓名 | 年龄 | 性别 |
| ------ | ------ | ------ |
|  张三  |   20  |   男   |
|  李四  |   19  |   男   |

对齐方式：

-: 设置内容和标题栏居右对齐。
:- 设置内容和标题栏居左对齐。
:-: 设置内容和标题栏居中对齐。

| 左对齐 | 居中对齐 | 右对齐 |
|:----- | :----: | ----: |
|  张三  |   20  |   男   |
|  李四  |   19  |   男   |

三、高级技巧

1. HTML元素

由于Markdown内联了HTML，所以Markdown没有的标签，可以借用HTML标签，如： <a>、<kbd>、、、、、、 等

如：百度

撤销：Ctrl/Command + Z

2. 文本缩进

可以直接按tab键或空格键，也可以使用转义字符 或&ensp;或&emsp;，HTML标点符号实体可以查看此网站：HTML字符实体引用列表

示例：

3. 转义字符

Markdown很多字符都代表着特定的含义，有时候我们只想要某个字符，却被Markdown默认成某种指令，比如前面讲到的数字.后面紧跟空格，会被默认为是有序列表，此时可以在.前面加上\转义特殊字符，只要在想要的符号前加上\，就可以单纯输出该字符

示例：

4. 锚链接

锚链接就是只在本页跳转的超链接，可以通过锚链接跳转到指定位置

方式	使用方法
脚注	在指定位置定义一个脚注`[^名称]`，然后在末尾添加注释`[^名称]:注释`
锚标记	在指定位置定义一个锚标记`{#标记名}`，在需要跳转的地方添加`[描述](#id名)`
HTML标签	在指定位置定义`<a id=id名></a>`，在需要跳转的地方添加`[描述](#id名)`，一切可以定义id的HTML标签都有效

示例：

锚链接

5. 插入数学公式

具体使用方法请参考：使用Markdown输出LaTex数学公式

范围	使用方法
行内	使用两个美元符 $$ 包裹 TeX 或 LaTeX 格式的数学公式
多行	使用两对美元符 $$ 包裹 TeX 或 LaTeX 格式的数学公式

示例：

行内：输入 $\ast$

结果为： *

多行：输入：

$$
X(m,n)=
\begin{cases}
x(n),\\
x(n-1)\\
x(n-1)
\end{cases}
$$

结果为：数学公式

6. 流程图

Markdown也支持插入流程图，下面简单介绍一下：

使用mermaid插件，详细使用方式请参考：markdown绘图插件mermaid、mermaid语法说明
使用flow插件，详细使用方式请参考：Markdown 中的flow语法

1. mermaid式横向流程图

```mermaid
graph LR
A[方形] -->B(圆角)
    B --> C{条件a}
    C -->|a=1| D[结果1]
    C -->|a=2| E[结果2]
    F[横向流程图]
    %% 我是注释
```
其中：
（1）第一句必须是 graph 方向，关键字graph表示一个流程图的开始，LR表示从左到右
（2）节点名称无具体要求，可以是数字、中文、字母、标点符号等，如：A[方形] -->B(圆角)可改为：*[方形] -->0(圆角)
（3）F[横向流程图]这句话可以省略
（4）%%加空格表示注释

流程图方向：

代码	方向
TB与TD	从上到下
BT	从下到上
RL	从右到左
LR	从左到右

流程图节点形状

形状	格式
默认形状	直接写变量，后面不跟其他，如：A
矩形	用作处理数据，变量+`[节点描述]`：如B[a=1]
圆角矩形	开始结束，变量+`(节点描述)`：如C(开始)
圆形	连接另一个进程，变量+`((节点描述))`：如D((连接到另一页))
非对称形	变量+`> 节点描述]`：如E>非对称形]
菱形	判断，变量+`{节点描述}`：如F{a>0}

graph LR
 默认图形-->B[a=1]-->C(开始) -->D((连接到另一页))--> E>非对称形]-->F{a>0}

效果如下：

流程图

节点连接线

形状	格式
箭头	A–>B
直连	A—B
注释	A–描述—B
箭头注释	A–描述–>B
虚线直连	A-.-B
虚线箭头	A-.->B
虚线注释直连	A-.描述.-B
箭头虚线注释	A-.描述.->B
加粗直连	A===B
加粗箭头	A==>B
加粗注释直连	A描述=B
加粗注释箭头	A描述>B

graph TB
  A1-->B1
  A2---B2
  A3--描述---B3
  A4--描述-->B4
  A6-.-B5
  A6-.->B6
  A7-.描述.-B7
  A8-.描述.->B8
  A9===B9
  A10==>B10
  A11==描述===B11
  A12==描述==>B12

效果如下：

连接线

2. flow式流程图

1. 定义节点

节点由三部分组成：

节点名称：无具体要求，可以是数字、中文、字母、标点符号等

节点类型：

节点类型	作用
start	开始节点
end	结束节点
inputoutput	输入输出节点
operation	处理节点
condition	判断节点
subroutine	子流程节点

显示文本：要显示在流程图的文本，如：a=1，也可以是链接，如：st=>start: 开始:>www.baidu.com

示例：

```mermaid
flowchat
st=>start: 开始
op=>operation: a=1
cond=>condition: a>5(是或否?)
sub1=>subroutine: a=a+1
io=>inputoutput: x=a
e=>end: 结束
st->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->cond
```
其中：1、st为节点名称
	2、节点与类型之间用 => 连接
	3、start：为节点类型，冒号后一定要空格
	4、‘开始’是显示在流程图上的文本

效果：

2. 连接方向：节点有四个连接方向，方向名分别为left,right,top,bottom

示例：

```mermaid
st=>start: 开始
op=>operation: a=1
cond=>condition: a>5(是或否?)
sub1=>subroutine: a=a+1
io=>inputoutput: x=a
e=>end: 结束
st(right)->op(right)->cond
cond(yes)->io(bottom)->e
cond(no)->sub1(right)->cond

其中：1、-> 是节点之间的连接方向箭头，前后不能有空格
	2、st(right)->表示开始节点的下一节点在开始节点的右侧，即开始节点的连接箭头从右侧出发，指向右侧
	3、io(bottom)->表示连接箭头从下方出发，指向下方，该语句还可以这样写：cond(yes,bottom)->io
	注意：若cond(no)->sub1(right)->cond改成cond(no，right)->sub1->cond

效果

注意：若cond(no)->sub1(right)->cond改成cond(no,right)->sub1->cond，则图形将发生改变，如图：

flow流程图

注意：

在CSDN中输入flow时，会自动变成```mermaid flowchat，此时只要在后面添加自己的语句即可
如：
```mermaid
flowchat
st=>start: 开始
op=>operation: a=1
e=>end: 结束
st(right)->op(right)->e

7. 序列图

1. mermaid插件序列图

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

效果：

2. sequence序列图

```mermaid
sequenceDiagram
Title: 标题
A->>B: hello（request）
Note right of B: B thinks
Note left of A: A query
B-->>A: hi(response)
B->>J: how are you?
J-->>A: Have you eaten yet?
A->>B: Do you want to eat?
Note over J,B: We're friends
participant C
Note right of C: bored
```

效果：

8. 甘特图

```mermaid
%% 语法示例
  gantt
        dateFormat  YYYY-MM-DD
        title 软件开发流程
        section 计划阶段
        调研                      :done,    des1, 2020-11-06,3d
        组建团队				   :crit, done, 2020-11-10,1d
        学习准备理解需求             :crit, done, 2020-11-10,24h
        section 需求分析
        需求                      :done,    des1, 2020-11-11,2d
        section 规格说明
        明确规格                   :done,    des1, 2020-11-14,24h
        section 软件设计
        原型                      :active,  des2, 2020-11-15, 5d
        UI设计                     :         des3, after des2, 8d
        section 软件开发
        设计框架                             :crit, done, after des2, 8d
        开发                       :crit, active, des4,after des3,20d
        section 测试
        功能测试                              :active, a1, after des4, 3d
        压力测试                               :after a1  , 20h
        集成测试                              :active, a1, after des4, 3d
        测试报告                               : 48h
        
```

效果：

甘特图

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

工具

编辑器