史上最全Markdown语法汇总

本文部分操作有多个语法可实现,但有些语法兼容性太差,在部分Markdown编辑器中不会生效,因此不做讲解。

一、基础语法

1.1 标题

  • “#”:标题1。

  • “##”:标题2。

  • “###”:标题3。

  • “####”:标题4。

  • “#####”:标题5。

  • “######”:标题6。

1.2 段落

使用“空行”分隔一行或多行文本(有些编辑器不加空行,直接换行也会识别成段落,但不规范)。

注意:不应使用空格或制表符缩进段落。因为使用空格缩进后,4个空格会变成<pre> <code>标签。

1.3 换行

“两个或多个空格 + 回车”。

注意:不接空格直接回车,不会换行,会将换行符转换为一个空格。

1.4 加粗

内容之前与之后各添加两个星号(**)。

1.5 斜体

内容之前与之后各添加一个星号(*)。

1.6 粗体+斜体

内容之前与之后各添加三个星号(***)。

1.7 引用

在内容之前添加一个大于号(>)。相当于HTML元素中的<blockquote>

该语法可嵌套使用,即在内容中可添加两、三、四、…个大于号(>),表示引用中再引用。

在HTML页面中效果为缩进4个字符。

1.8 有序列表

在内容之前添加“数字 + 英文句号”。

该语法可嵌套使用,即在内容中可继续添加“数字 + 英文句号”。

注意:

  • 有序列表中不要添加标题语法(官方不支持),有些编辑器不支持。

  • 若要在有序列表中添加其他语法,需在换行后的语法前添加2-5个空格(建议4个),这样才能保持有序列表的连续性。空格不要添加太多,不然其他语法不会生效。

1.9 无序列表

在内容之前添加一个减号(-)或星号(*)或加号(+)。

该语法可嵌套使用,即在内容中可继续添加减号(-)或星号(*)或加号(+)。

注意:

  • 无序列表中不要添加标题语法(官方不支持),有些编辑器不支持。

  • 建议使用加号(+)或减号(-),不要使用星号(*),因为星号(*)会与其他操作语法混淆,不易阅读。

  • 若要在无序列表中添加其他语法,需在换行后的语法前添加2-5个空格(建议4个),这样才能保持无序列表的连续性。空格不要添加太多,不然其他语法不会生效。

1.10 代码

在内容之前与之后各添加一个或两个反单引号(`)。

注意:

  • 在一个或两个反单引号(`)之间若要添加一个不生效的反单引号(`),则需添加两个或一个反单引号(`)即可。

  • 在生效的反单引号(`)旁边,谨慎添加不生效的反单引号(`),避免识别混乱。

1.11 代码块

在内容之前与之后各添加三个反单引号(`)。

在内容之前的那三个反单引号(`)后面添加代码语言名称,可实现代码高亮。

1.12 水平线

添加三个及以上星号(*)或短划线(-)或下划线(_)。

注意:使用星号(*)或下划线(_),会与其他操作语法混淆,不易阅读。使用短划线(-)也一样【有些编辑器支持“内容+换行+多个短划线”,生成标题2,此时可使用“内容+空行+多个短划线”解决】。

1.13 链接

  1. “[链接文字或图片](网址+空格+“标题”)”,其中”空格+标题“为可选项。”标题“为鼠标悬浮其上时显示的内容。

  2. [链接文字或图片][标签]

    空行

    [标签]:+空格+网址+空格+“标题”,


    注意:

    • 其中”空格+标题“为可选项。”标题“为鼠标悬浮其上时显示的内容。

    • 标签不区分大小写,可以包括字母、数字、空格或标点符号。

    用途:

    • 网址提取出来可重复使用。

    • 将”[标签]:+空格+网址+空格+“标题”“放置于文档末尾,”[链接文字][标签]“放置于段落中,避免因网址过长影响阅读。

  3. <网址>,可快速将网址转换为链接。部分编辑器可不加尖括号转换,但这不符合官方定义。

    注意:由于许多编辑器直接输入URL也会默认转换为链接,因此若要使该链接仅以字符串形式显示,可在URL前后各添加一个反单引号(`)。

注意:若网站中包含括号等内容时,需加上反斜杠(\)取消其语法功能。否则部分编辑器会识别错误。

1.14 图片

  1. ”![链接文字](图片地址+空格+“标题”)“,类似于链接,区别在于前面有一个感叹号。

    注意:

    • 若图片无法显示,则显示链接文字。

    • 鼠标悬浮图片上时,显示标题。

    • 部分编辑器不支持绝对路径(如VSCode),此时可使用相对路径。

  2. [![链接文字](图片地址)](网址+空格+“标题”),此时点击该图片即可打开对应网址。

    注意:若要更改图片大小、位置等参数,则只能使用<img title="" src="" alt="" width="" data-align="左/中/右">标签。其中tltle属性对应标题,alt属性对应链接文字,src属性对应图片地址。

  3. ![链接文字][标签]

    空行

    [标签]:+空格+图片地址+空格+“标题”,

1.15 转义符

在字符前添加反斜杠(\)。

二、扩展语法

2.1 删除线

在内容之前与之后各添加两个波浪号(~~)。

2.2 表格

语法:三个及以上连字符(---)来创建每个列的标题,用竖线(|)分隔每个列。

格式:第一行是标题,对应<thead>,第二行写连字符(---)。竖线数量保持一致。

总结:以第二行为核心,通过竖线(|)绘制表格。

|标题1|标题2|标题3|
|----|----|----|
|文本1|文本2|文本3|
|文本4|文本5|文本6|

竖线与竖线之间可随意添加空格来控制文本对齐,因为空格在表格中不显示。

在第二行写连字符(---)前后添加冒号(:)可实现居左、中、右的对齐。
    “|:---|”整列居左对齐(可不添加,因为居左对齐为默认对齐方式)。
    “|:---:|”整列居中对齐。
    “|---:|”整列居右对齐。
注意:冒号(:)与连字符(---)之间不能有空格。

注意:

  • 由于markdown规范限制,无法实现跨行跨列的操作。

  • 表格内可添加链接、代码、重点等,但不可添加多行代码块(一行代码块可以,但官方不支持)、标题、块引用、列表【有序、无序等】、水平规则【即水平线】、HTML标记、图像(图像可以,但官方不支持)。

2.3 脚注(Footnotes)

[^标识符]

空行

[^标识符]:脚注内容


注意:

  • 冒号与脚注内容之间可不加空格。

  • 标识符可以是数字或单词,但不能包含空格或制表符。

  • 标识符的作用仅仅是将脚注引用与脚注本身相关联。实际效果中,脚注是按照其出现的先后顺序依次编号为1,2,3,…。

  • 部分编辑器不支持脚注,还有部分编辑器会把脚注转换为链接。

2.4 链接标题ID(锚点)

  1. 标题(#/##/###/...) {#标题ID}或者<a id="标题ID"></a>
    [链接名称](#标题ID)
    
    此时点击链接名称,将会自动跳转到包含该标题ID的标题位置。
    标题与花括号之间可无空格。
    除了使用a标签外,还可使用其他任意HTML元素。
    {#标题ID}相当于HTML标签中的<h1或h2... id="标题ID"></h1或h2...>。
    
  2. <a id="标题ID" href="...">......</a>
    空行
    [链接名称](#标题ID)
    
    此时点击链接名称,将会自动跳转到包含该标题ID的链接位置(不触发链接)。
    除了使用a标签外,还可使用其他任意HTML元素。
    

注意:仅部分编辑器支持语法{#标题ID},但绝大部分编辑器支持语法<a id="标题ID"></a>。怎么用自己看着办。

用途:制作目录和文档大纲。点击目录中的链接,即可跳转至对应标题。

2.5 定义列表

标题1

定义1

定义2

空行

标题2

定义3

定义4

相当于HTML元素中的

<dl>
    <dt>标题1</dt>
    <dd>定义1</dd>
    ......
</dl>

注意:

  • 冒号与定义之间有一个空格。

  • 仅部分编辑器支持,因此该语法慎用。

2.6 任务列表(复选框)

减号(-)/加号(+)/星号(*)+一个空格+左中括号([)+一个空格/字符X+右中括号+一个空格+内容。

eg:- [ ] 内容。

  • 中括号内加空格,表示复选框未选中,加字符X,表示复选框已选中。

  • 字符X不区分大小写。

注意:虽然减号(-)、加号(+)、星号(*)都可以,但官方要求使用减号(-)。

2.7 图表

Mermaid 是最流行的 Markdown 图表工具之一,它允许你使用简单的文本语法生成各种图表。

  • 流程图 (Flowchart)

  • 时序图 (Sequence Diagram)

  • 类图 (Class Diagram)

  • 状态图 (State Diagram)

  • 甘特图 (Gantt Chart)

  • 饼图 (Pie Chart)

2.7.1 流程图

  1. 流程图方向

    • TDTB:从上到下。

    • BT:从下到上。

    • RL:从右到左。

    • LR:从左到右。

  2. 节点形状

    • A[方形]:矩形。

    • B(圆角矩形):圆角矩形。

    • C{菱形}:菱形(决策)。

    • D((圆形)):圆形。

    • E>旗帜形]:旗帜形。

  3. 连接线类型

    • -->:实线箭头。

    • -.->:虚线箭头。

    • ==>:粗实线箭头。

    • --:实线。

    • -.:虚线。

graph TD
    A[开始] --> B{条件判断}
    B -->|Yes| C[执行操作A]
    B -->|No| D[执行操作B]
    C --> E[结束]
    D --> E>旗帜形状]

Yes

No

开始

条件判断

执行操作A

执行操作B

旗帜形状

2.7.2 时序图

  • participant: 定义参与者。

  • ->>: 实线箭头。

  • -->>: 虚线箭头。

  • note: 添加注释。

sequenceDiagram
    participant A as 用户
    participant B as 系统
    participant C as 数据库

    A->>B: 登录请求
    B->>C: 验证用户信息
    C-->>B: 返回验证结果
    B-->>A: 登录成功/失败
数据库 系统 用户 数据库 系统 用户 登录请求 验证用户信息 返回验证结果 登录成功/失败

2.7.3 类图

连接线类型:  
  classA --|> classB : 继承
  classC --* classD : 组成
  classE --o classF : 集合
  classG --> classH : 关联
  classI -- classJ : 实线连接
  classK ..> classL : 依赖
  classM ..|> classN : 实现
  classO .. classP : 虚线连接
classDiagram
    class 用户 {
        +用户名: string
        +密码: string
        +登录()
    }

    class 订单 {
        +订单号: int
        +创建日期: date
        +计算总价()
    }

    用户 "1" --> "n" 订单
1
n

用户

+用户名: string

+密码: string

+登录()

订单

+订单号: int

+创建日期: date

+计算总价()

2.7.4 甘特图

  • title:设置标题。

  • dateFormat:定义日期格式。

  • section:定义阶段。

  • done(已完成)、active(进行中)、crit(关键):任务状态。

gantt
    title 项目开发计划
    dateFormat  YYYY-MM-DD
    section 设计阶段
    需求分析      :done,        des1, 2024-01-01,2024-01-15
    UI设计       :crit,        des2, 2024-01-10, 30d
    section 开发阶段
    前端开发      :active,      dev1, after des2, 45d
    后端开发      :             dev2, 2024-02-01, 60d
    section 测试阶段
    单元测试      :             test1, after dev1, 15d
    集成测试      :             test2, after dev2, 10d
2024-01-07 2024-01-14 2024-01-21 2024-01-28 2024-02-04 2024-02-11 2024-02-18 2024-02-25 2024-03-03 2024-03-10 2024-03-17 2024-03-24 2024-03-31 2024-04-07 需求分析 UI设计 后端开发 前端开发 单元测试 集成测试 设计阶段 开发阶段 测试阶段 项目开发计划

2.7.5 饼图

pie
    title 浏览器市场份额
    "Chrome" : 65
    "Safari" : 15
    "Firefox" : 10
    "其他" : 10
65% 15% 10% 10% 浏览器市场份额 Chrome Safari Firefox 其他

2.7.6 状态图

  • 使用“状态 ID + 冒号”的方式简化状态节点的声明。
stateDiagram
    状态1 : 状态1的文字描述

状态1的文字描述

  • 转换在状态图中表现为连接两个状态节点的单向箭头,语法为“字符箭头-->”。
stateDiagram
    状态1 --> 状态2

状态1

状态2

  • 通过(行内容):label的形式,为转换添加描述文本。
stateDiagram
    状态1 --> 状态2: 咻~

咻~

状态1

状态2

  • 状态图中有两个特殊的状态节点:开始节点和结束节点。如果需要在状态图中显示开始或结束节点,可以通过[*]方式声明。
stateDiagram
    [*] --> 状态节点
    状态节点 --> [*]

状态节点

  • 在负责的状态描述中,有的状态节点会包含一系列的子状态,我们可以用组合嵌套的方式来描绘它们。语法是“花括号{},描述子状态。
stateDiagram
    [*] --> 父状态节点
    state 父状态节点 {
        [*] --> 子状态节点
        子状态节点 --> [*]
    }
父状态节点

子状态节点

  • 对于非单一结果的状态转换,我们可以使用<><>标签实现分支。
stateDiagram
    state 分支 <>
      [*] --> 分支
      分支 --> 分支2
      分支 --> 分支3

      state 合并 <>
      分支2 --> 合并
      分支3 --> 合并
      合并 --> 状态4
      状态4 --> [*]

分支

分支2

分支3

合并

状态4

  • 对于一些同步完成的状态转换,我们可以用--符号声明并行效果。
stateDiagram
        [*] --> 激活状态

        state 激活状态 {
            [*] --> NumLock关
            NumLock关 --> NumLock开 : 按下 NumLock 键
            NumLock开 --> NumLock关 : 按下 NumLock 键
            --
            [*] --> CapsLock关
            CapsLock关 --> CapsLock开 : 按下 CapsLock 键
            CapsLock开 --> CapsLock关 : 按下 CapsLock 键
            --
            [*] --> ScrollLock关
            ScrollLock关 --> ScrollLock开 : 按下 ScrollLock 键
            ScrollLock开 --> ScrollLock关 : 按下 ScrollLock 键
        }
激活状态

按下 NumLock 键

按下 NumLock 键

NumLock关

NumLock开

按下 CapsLock 键

按下 CapsLock 键

CapsLock关

CapsLock开

按下 ScrollLock 键

按下 ScrollLock 键

ScrollLock关

ScrollLock开

  • 有时候图表元素不能完全表达我们的设计思路,这时候需要在图中加入文字描述。使用note left/right of 备注内容 end note的方式或note left/right of 状态名 : 备注内容 ,将备注添加到状态节点的左/右侧。
stateDiagram
        状态1 --> 状态2

        状态1 : 描述将出现在右侧

        note right of 状态1
            这里添加描述内容
        end note
        note left of 状态2 : 在节点左侧添加描述

描述将出现在右侧

状态2

这里添加描述内容

在节点左侧添加描述

2.8 数学公式

2.8.1 行中公式

在公式之前和之后各添加一个美元符($)。

$1 + 1 = 2$

2.8.2 独立公式

在公式之前和之后各添加两个美元符 ($$),换行通过在行尾添加 \\ 实现。

$$
x + y = 10 \\\\
x - y = 6 \\\\
2x = 16 \\\\
x = 8 \\\\
y = 2
$$  

2.8.3 运算符号

  • 加号:+。

  • 减号:-。

  • 加减号:\pm。

  • 减加号:\mp。

  • 叉乘号:\times。

  • 点乘号:\cdot。

  • 星乘号:\ast。

  • 除法:\div。

  • 斜除号:/。

  • 绝对值:|公式|。

  • 分式:

    • \frac{分子}{分母}。

    • {分子} \over {分母}。

2.8.4 上、下标

上标符号:”^“。$x^2$
下标符号:”_“。$y_1$
组合符号:”{公式}“。$a^{x^{2}+y^{2}}$

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值