Markdown 语法详细学习资料

原创已于 2025-07-09 18:54:13 修改 · 954 阅读

27 ·

CC 4.0 BY-SA版权

文章标签：

#编辑器

于 2025-07-09 18:53:32 首次发布

Markdown 语法详细学习资料

一、Markdown 基础认知

1.1 定义与起源

Markdown 是由 John Gruber 在 2004 年创建的轻量级标记语言，旨在用纯文本格式编写文档，同时能轻松转换为 HTML、PDF 等富文本格式。它的设计理念是让文档在纯文本状态下也具备良好的可读性，同时简化传统 HTML 的复杂标签。

1.2 核心优势

简洁高效：用符号替代复杂标签，专注内容创作
跨平台性：纯文本格式，支持所有编辑器和系统
易读易写：原始文本结构清晰，无需转换即可阅读
广泛兼容：GitHub、知乎、语雀等平台均支持

二、基础语法详解

2.1 标题（六级标题体系）

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

效果展示：

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

2.2 文本样式

粗体（ctrl+B）	**粗体** 或 __粗体__
斜体（ctrl+I）	*斜体* 或 _斜体_
加粗斜体	***加粗斜体*** 或 ___加粗斜体___
删除线（alt+shift+5）	~~删除线~~
下划线（ctrl+U）	<u>下划线</u>
Xy	上标：X  <sup>y</sup>
An	下标：A  <sub>n</sub>

效果展示：

样式	语法	示例	效果
加粗	内容或内容	重要信息	重要信息
斜体	内容或内容	强调内容	强调内容
加粗斜体	内容	关键内容	关键内容
删除线	内容	~~过时信息~~	~~过时信息~~
下划线	内容	需要标注内容	需要标注内容

2.3 段落与换行

段落：直接输入文本，段落间用空行分隔
换行：
- 方式 1：行末加 2 个以上空格 + 回车
方式 2：使用 HTML 标签 <br> 或 <br/>

2.4 列表

2.4.1 无序列表

- 列表项1
* 列表项2
+ 列表项3

效果：

列表项 1
列表项 2
列表项 3

2.4.2 有序列表

1. 第一项
2. 第二项
3. 第三项

效果：

第一项
第二项
第三项

2.4.3 列表嵌套

1. 一级列表项1
   - 二级列表项1
   - 二级列表项2
2. 一级列表项2
   * 二级列表项3
   * 二级列表项4

效果：

一级列表项 1
- 二级列表项 1
- 二级列表项 2
一级列表项 2
- 二级列表项 3
- 二级列表项 4

2.5 引用

> 单层引用
>> 双层引用
>>> 三层引用

效果：

单层引用

双层引用

三层引用

三、高级语法应用

3.1 代码块

3.1.1 行内代码

`select * from dual;`

效果：select * from dual;

3.1.2 代码区块

方式 1：缩进法

    select bill_id,user_id 
    from cm_user
    where county_code='576'
    order by user_id;  -- 单行注释
    /*
    	多
    	行
    	注
    	释
    */

方式 2：反引号法

def add(a, b):
    return a + b

3.2 链接

3.2.1 行内链接

[百度](https://www.baidu.com)

效果：百度

3.2.2 参考链接

[链接文字][标签]
[标签]: https://example.com "可选标题"

3.2.3 自动链接

<https://www.example.com>

效果：https://www.example.com

3.3 图片

语法格式：![图片描述(可写可不写)](图片地址URL)

图片格式：
对齐方式：#pic_left（居左）、#pic_center（居中）、#pic_right（居右）
图片大小：对齐方式=宽x高
例如居中且图片大小为100x100：

![图片描述(可写可不写)](图片地址URL#pic_center=100x100)

注意事项：可直接复制本地图片到编辑处。

示例：

![百度](https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png#pic_center=10x10 "百度")

3.4 表格

| 表头1 | 表头2 |
|------|------|
| 内容1 | 内容2 |
| 内容3 | 内容4 |

对齐方式：

| 左对齐 | 居中对齐 | 右对齐 |
|:-|:-:|-:|
| 内容1 | 内容2 | 内容3 |

四、特殊语法与技巧

4.1 分隔线

***
---
___

效果：

4.2 转义字符

使用 \ 转义特殊字符，例如：

\* 这不是斜体

效果：* 这不是斜体

4.3 脚注

这是正文[^1]

[^1]: 这是脚注内容

效果：
这是正文[^1]

4.4 任务列表

- [x] 已完成任务
- [ ] 待完成任务

效果：

已完成任务
待完成任务

4.4 标题链接

语法格式：@[TOC](标题)
子标题会自动以链接形式在标题下显示

4.5 其他

<kbd> 快捷键 </kbd>
示例：保存的快捷键是Ctrl+S

五、Markdown 与 HTML 混合使用

5.1 颜色

可直接嵌入 HTML 标签实现复杂效果，例如：

<div style="color:red;">这段文字是红色的</div>

效果：

这段文字是红色的

Color Color HEX Color Name
红色 #FF0000 red
绿色 #008000 green
蓝色 #0000FF blue
橙色 #FF7D00 orange
黄色 #FFFF00 yellow
紫色 #800080 purple
青色 #00FFFF cyan
金色 #FFD700 gold
棕褐色 #A52A2A brown
橘红色 #FF7F50 coral
深粉色 #FF1493 deeppink
紫红色 #FF00FF fuchsia
深蓝色 #000080 navy
蓝绿色 #008080 teal
深橙色 #FF8C00 darkorange
春绿色 #00FF7F springgreen
橄榄绿 #808000 olive
番茄色 #FF6347 tomato
暗紫色 #9400D3 DarkViolet
蓝紫色 #8A2BE2 BlueViolet
黑红色 #8B008B DarkMagenta
紫粉色 #FA06F3 /
深天蓝 #00BFFF /
玫瑰红 #DA70D6 /
中春绿色 #00FA9A /
中海洋绿 #3CB371 /
闪光深绿 #32CD32 /
浅海洋绿 #20B2AA /

5.2 字体

color：用于设置字体颜色；face：用于设置字体类型；size：用于设置字体大小

<font face="宋体" color=green size=3>宋体绿色</font> 或
<font face="幼圆" color=FF0000 size=3>幼圆红色</font>

宋体绿色或幼圆红色

Face
微软雅黑
黑体
宋体
幼圆
楷书
华文行楷
华文隶书
华文彩云

5.3表格

<table>
    <tr>
        <th rowspan="2">值班人员</th>
        <th><font face="宋体" color=green size=4>星期一</font></th>
        <th><font face="宋体" color=red size=4>星期二</font></th>
        <th>星期三</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>李四</td>
        <td>王五</td>
    </tr>
</table>

值班人员	星期一	星期二	星期三
值班人员	张三	李四	王五

六、其他

6.1 Emoji表情：

使用Emoji表情符号，可以使用Emoji的名称或Unicode编码：
语法：:smile:或😄
效果： 😄 或 😄

更多icon和表情符号及使用参考：https://blog.csdn.net/Xminyang/article/details/124566884

6.2 LaTeX

行内显示语法： $公式$ ： $f(x) = x-x^2ln(x)$ $f(x) = x-x^2ln(x)$
块内显示语法：$$公式$$：$$\sum_{n=1}^{100} n$$ $\sum_{n=1}^{100} n$
上标：X^y^：X^y
下标：A~n~：A_n
上下标： $C_n^m$ ： $C_n^m$

关于LaTeX的详解和使用参考：https://freeopen.github.io/mathjax/

6.3 UML图

流程图

   st=>start: 开始框
   op=>operation: 处理框
   cond=>condition: 判断框(是或否?)
   e=>end: 结束框
   st->op->cond
   cond(yes)->e
   cond(no)->op

时序图

	对象A->对象B:对象A发出(请求)
    Note right of 对象B: 对象B的描述
    Note left of 对象A: 对象A的描述
    对象B-->对象A: 对象B(响应)

甘特图

gantt
title 软件开发流程
section 设计
  需求              :des1, 2022-10-08, 3d
  UI设计            :des2, after des1, 3d
  开发任务           :des3, after des2, 9d
  测试任务           :des4, after des3, 6d
section 开发
  准备              :s1, after des1,1d
  设计框架           :crit, done, after s1, 3d
  开发              :crit, active, 8d
section 测试
  功能测试           :a1, after des3, 3d
  压力测试           :a2, after a1, 1d
  测试报告           :a3, after a2, 2d