Markdown 基本语法 & 扩展语法 学习笔记

本文是 Markdown 基本语法以及 Markdown 扩展语法的学习笔记,文内包含了相关语法的详细使用示例。

前言

以下为来自 Wikipedia 对 Markdown 语法的介绍 。

Markdown是一种轻量级标记语言,创始人为约翰·格鲁伯。它允许人们使用易读易写的纯文本格式编写文档,然后转换成有效的XHTML(或者HTML)文档。

由于Markdown的轻量化、易读易写特性,并且对于图片,图表、数学式都有支持,目前许多网站都广泛使用Markdown来撰写帮助文档或是用于论坛上发表消息。如GitHub、Reddit、Discord、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge、简书等,甚至还能被用来撰写电子书。

Tips : 将本文中代码块的内容复制并粘贴至 Markdown 编辑器中可以直观地看到预览效果。

Markdown 基本语法

Markdown 发明者 John Gruber 原始设计文档中所列出的所有 Markdown 语法被称为 Markdown 基本语法,这部分语法几乎能被所有的 Markdown 编辑器支持

标题

  • 语法: 符号 # + 空格 + 标题文本
  • 注意: 标题需要独占一行,符号 # 后需要有 空格
  • 建议: 实际书写时,在标题行前后各留一行空白行
    # 一级标题
    
    ## 二级标题
    
    ### 三级标题
    
    #### 四级标题
    
    ##### 五级标题
    
    ###### 六级标题
    

段落

  • 语法: 两个不同的段落之间,使用 空白行 进行分隔
  • 注意: 不要使用 空格tab 对段落进行缩进对齐
  • 换行: 在段落的末尾可以使用 两个空格<br> 标签换行
    这是新段落的第一行,行末尾使用两个空格进行换行  
    这是新的一行,但是和上一行属于同一个段落  
    
    这是新段落的第一行,行末尾使用 HTML 的标签进行换行<br>
    这是新的一行,但是和上一行属于同一个段落  
    

强调

粗体

  • 语法: 使用 ** 包围需要加粗的文本内容
  • 注意: 双下划线 __ 也可以加粗文本,但不被推荐
    **这是整行加粗的文本字体**  
    这是只 **加粗** 一部分文本  
    

斜体

  • 语法: 使用 * 包围需要倾斜的文本内容
  • 注意: 下划线 _ 也可以倾斜文本,但不被推荐
    *这是整行倾斜的文本字体*  
    这是只 *倾斜* 一部分文本  
    

粗体 + 斜体

  • 语法: 使用 *** 包围需要同时加粗、倾斜的文本内容
  • 注意: 三下划线 ___ 也能同时加粗、倾斜文本,但不被推荐
  • 建议: 部分 Markdown 编辑器需要使用 空格 分隔加粗、倾斜的文本内容
    ***这是整行加粗、倾斜的文本字体***  
    这是只 ***加粗、倾斜*** 一部分文本  
    

块引用

  • 语法: 在段落的最前添加符号 > + 空格 即为块引用
  • 注意: 块引用中可以嵌套其他语法,如加粗、倾斜、列表等
  • 建议: 实际书写时,在块引用前后各留一行空白行
    > 这是一个普通的块引用,只有一个段落  
    
    > 这是有多个段落的块引用,这是第一个段落  
    > 
    > 这是有多个段落的块引用,这是第二个段落  
    > 同个块引用的两个段落之间的空白行需要加上 `>` 符号  
    
    > 这是一个在块引用中嵌套块引用的例子  
    >> 这是嵌套的块引用,只需要再添加一个 `>` 符号  
    >>> 这是再继续嵌套的块引用,只需要再继续添加一个 `>` 符号  
    
    > 这是在块引用中嵌套其他语法的例子  
    > - 嵌套无序列表  
    > 1. 嵌套有序列表  
    > 
    > 嵌套 **加粗***倾斜* 等字体样式  
    

列表

有序列表

  • 语法: 序号 1. + 空格 + 列表内容
  • 注意: 有序列表中的第一条必须要以 1. 开头
  • 建议: 实际书写时,按照数学顺序书写列表序号
    1. 这是一个有序列表  
    2. 列表序号按照数学顺序排序  
    3. 这是推荐的写法  
    
    ---
    
    1. 这也是一个有序列表  
    100. 列表序号乱序但预览效果一致  
    50. 并不推荐这么写  
    

无序列表

  • 语法: 符号 - + 空格 + 列表内容
  • 注意: 不要在同一个列表中混用 -+* 列表符号
  • 转义: 若以 数字 + . 开始的无序列表,需要用 \ 转义 . 符号
    - 这是使用 `-` 生成的无序列表  
    - 这是同一个列表的段落  
    
    ---
    
    + 这是使用 `+` 生成的无序列表  
    + 这是同一个列表的段落  
    
    ---
    
    - 不要在同一个列表中混用 `-``+``*` 列表符号  
    + 不要在同一个列表中混用 `-``+``*` 列表符号  
    * 不要在同一个列表中混用 `-``+``*` 列表符号  
    - 混用 `-``+``*` 列表符号会被认为不是同一个列表  
    
    ---
    
    - 2022\. 使用 `\` 转义 `.` 符号,防止被识别为有序列表  
    - 2022. 没有使用 `\` 转义 `.` 符号,预览时可能会排版错位  
    

列表嵌套

  • 语法: 使用 四个空格 在列表中缩进,然后添加嵌套元素
  • 注意: 在列表中嵌套代码块时,需要缩进 八个空格
  • 建议: 在列表中嵌套代码块时,推荐使用围栏代码块语法
    - 这是一个无序列表,并在列表中嵌套列表  
        1. 缩进四个空格,然后嵌套一个有序列表  
        - 缩进四个空格,然后嵌套一个无序列表  
    
    - 这是一个无序列表,并在列表中嵌套段落、块引用  
        这是一个嵌套的段落  
        > 这是一个嵌套的块引用  
    
    - 这是一个无序列表,并在列表中嵌套代码块  
        ```
        def main():
            print('Hello World')
        ```
        - 使用围栏代码块语法时,只需要缩进 `四个空格`  
        - 直接缩进 `八个空格` 也能嵌套代码块,但此法建议在代码块前后各留一行空行  
    
    - 这是一个无序列表,并在列表中嵌套图片  
        <img src='https://avatars.githubusercontent.com/u/39695373?v=4'>  
    

代码

  • 语法: 使用单个反引号 ` 包围代码文本内容
  • 注意: 代码中若有单个反引号 ` ,需用两个反引号 `` 转义
    `这是将整段文本都渲染为代码样式`  
    这是将 `部分文本` 渲染为代码样式  
    ``这是转义文本中 `单反引号` 的内容``  
    

分割线

  • 语法: 使用至少三个水平横线 --- 单独成行进行分割
  • 注意: 三个星号 *** 或三个下划线 ___ 也是分割线
  • 建议: 实际书写时,在分割线前后各留一行空白行
    ---
    三个横线 `---` 是分割线  
    
    ***
    三个星号 `***` 也是分割线  
    
    ___
    三个下划线 `___` 也是分割线  
    
    -----------
    只要 `-``*``_` 的数量超过三个,都能识别为分割线  
    注意:这样形式 `---***___` 不是分割线  
    

链接

普通链接

  • 语法: 格式为 [链接文本] + (链接URL)
  • 样式: 可以使用加粗、倾斜、代码等语法修饰链接内容
    这是未修饰的链接地址:  
    [Dancying Study Notes](https://dancying.cn)  
    
    这是修饰后的链接地址:  
    加粗  : **[Dancying Study Notes](https://dancying.cn)**  
    倾斜  :  *[Dancying Study Notes](https://dancying.cn)*  
    代码  :  `[Dancying Study Notes](https://dancying.cn)`  
    

链接标题

  • 语法: 格式为 [链接文本] + (链接URL "标题文字")
  • 注意: 在 链接URL标题文字 之间有一个 空格
  • 标题: 链接标题为鼠标悬浮链接文本时显示的提示文本
    这是一个带有提示标题的链接地址:  
    [Dancying Study Notes](https://dancying.cn "这是一段描述标题,跟在URL后面并以空格隔开")  
    

快速链接

  • 语法: 格式为 < + 链接URL + >
  • 提示: 快速链接可看作 链接文本链接URL 一样的普通链接
    使用尖括号 `<>` 包围 URL 地址或 Email 地址,可以让 URL 地址或 Email 地址变为可点击状态  
    <https://dancying.cn>  
    <dancying2023@163.com>  
    

引用型链接

  • 语法: 格式为 [链接文本][标签] + [标签]: 链接URL 可选标题
  • 建议: 第二个 标签 部分,在前后各留一行空白行
    第一部分: `[链接文本][标签]`  
    其中 `标签` 可以是数字、字母、空格或标点符号,不区分大小写  
    以下都是合法的例子  
    
    [Dancying Study Notes][1234567890]  
    [Dancying Study Notes][abc123]  
    [Dancying Study Notes][!@#$%^&*()_+]  
    
    ---
    
    第二部分: `[标签]: 链接URL 可选标题`  
    其中 `标签` 需要与第一部分的 `标签` 一致  
    链接URL无需特别处理,或者用 `<>` 括起来  
    可选标题需要用双引号 `""` 、单引号 `''` 、括号 `()` 中的一种包围起来  
    不要遗漏冒号 `:` 后的 `空格` ,不要遗漏 `链接URL``可选标题` 之间的 `空格`  
    第二部分可以放在文章的任何部分,比如当作尾注或脚注  
    以下都是合法的例子  
    
    [1234567890]: https://dancying.cn  
    [ABC123]: https://dancying.cn "这是一个描述标题"  
    [!@#$%^&*()_+]: <https://dancying.cn> (这是一个描述标题)  
    
    注意:带 `url``标签` 部分,建议前后各留空一行  
    
    ---
    
    根据我的实验,以下的例子也是能够使用的  
    没有 `标签` 时则链接文本作为 `标签` 的默认值  
    
    [Dancying Study Notes]  
    
    [Dancying Study Notes]: https://dancying.cn "没有显式设置标签的值"  
    
    ---
    
    Tips : 若需要插入 base64 格式的图片,可以使用这种方式把 base64 的图片值统一放到文末  
    

图片

  • 语法: 符号 ! + [图片描述] + (图片URL)
  • 注意: 图片和普通链接的区别仅是一个 ! 英文感叹号
    这是一个普通的图片展示  
    ![Dancying GitHub Avatars](https://avatars.githubusercontent.com/u/39695373?v=4)  
    
    给图片添加链接URL: 只需将图片语法的值作为普通链接的 `链接文本`  
    [<img src="https://avatars.githubusercontent.com/u/39695373?v=4">](https://dancying.cn)  
    
    Tips : 可以使用 HTML 中的 <img> 标签代替 Markdown 的图片语法  
    

转义字符

  • 语法: 反斜杠符号 \ + 被转义字符
  • 建议: 实际书写时,可考虑使用代码语法修饰而非转义
    以下字符都可以被反斜杠 `\` 转义  
    `\``` ` ```*``_``{}``[]``<>``()``#``+``-``.``!``|`  
    
     \# 转义标题的 `#` 号  
     \* 转义列表的 `*`

Markdown 扩展语法

Markdown 基本语法中添加额外元素扩展出来的 Markdown 语法被称为 Markdown 扩展语法,这部分语法不是所有的 Markdown 编辑器都能完整支持

表格

  • 语法: 三个以上的横线 --- 分隔标题,管道符 | 分隔列
  • 注意: 在三横线 --- 两端添加英文冒号( : )可左右对齐内容
  • 建议: 实际书写时,可以填充内容将管道符 | 对齐
    以下为一个普通的表格  
    - 可以用 `空格` 填充对齐管道符 `|` 以增加原文美观性  
    - 可以用横线 `-` 填充对齐管道符 `|` 以增加原文美观性  
    
    | title_1|title_2|
    |  ---   |-------|
    |content |content|
    |content |content|
    
    ---
    
    以下为修饰样式后的表格  
    - 使用冒号 `:` 添加在三横线 `---` 两端可左右对齐表格内容  
    - 使用代码语法 `` ` `` 可修饰文本内容  
    - 使用强调语法如加粗、倾斜可修饰文本内容  
    
    |title_1|**title_2**|`title_3`|
    | :---: |:--------  |  -----: |
    |center |`left`     |*right*  |
    

围栏代码块

  • 语法: 使用三个连续反引号 ``` 包围代码块文本内容
  • 注意: 三个连续反引号 ```需要单独占一行
    ```
    # 这是一段普通的代码块文本  
    # 注意三个反引号单独占一行  
    def main():  
        print("Hello World")  
    ```
    
    ```python
    # 这是使用语法高亮的代码块文本  
    # 在第一个三反引号后面加上语言类型即可  
    def main():  
        print("Hello World")  
    ```
    

脚注

  • 语法: 格式为 [^标识符] + [^标识符]: 脚注说明
  • 注意: 其中 标识符 为数字或字母,不能包含 空格制表符
  • 建议: 实际书写时,在脚注部分前后各留一行空白行
    [^1234567]: 这是放在段落出现之前的脚注说明;  
    
    这是一个纯数字标识符的脚注例子[^1234567]  
    这是一个数字字母混合标识符的脚注例子[^123abcd]  
    
    > 脚注说明可以放在段落出现之前,或者段落出现之后  
    > 脚注的说明内容可以使用代码、加粗、倾斜等语法修饰  
    
    [^123abcd]: 这是放在段落出现之后的脚注说明;  
    
    注意:不要把脚注说明放在列表、块引用或表格等元素中  
    

标题 ID

  • 语法: 格式为 title + 空格 + {#titleID}
  • 注意: 部分 Markdown 编辑器无法正确预览标题 ID 语法
    ### 这是标题内容 {#这是标题ID}  
    
    以上标题和 ID 对应的 HTML 代码如下:  
    `<h3 id="这是标题ID">这是标题内容</h3>`  
    
    标题 ID 的作用:可以使用链接跳转到文章的对应标题部分  
    以下为标题 ID 的使用示例  
    
    [相对URL路径的链接](#这是标题ID)  
    [绝对URL路径的链接](https://dancying.cn/syntax/syntax-001.html#%E6%A0%87%E9%A2%98id)  
    

定义列表

  • 语法: 格式为 列表标题 + 换行 + : + 空格 + 列表内容
  • 注意: 部分 Markdown 编辑器无法正确预览定义列表语法
    这是第一个定义列表的标题  
    : 定义列表内容新起一行,并以冒号 `:` 开头  
    : 冒号后面紧跟 `空格`  
    
    这是第二个定义列表的标题  
    : 定义列表的标题前需要留一行空白行  
    

删除线

  • 语法: 使用两个波浪号 ~~ 包围需要删除的文本内容
  • 建议: 为了文章的美观,不要大面积的使用删除线语法
    ~~这是删除整行文本内容~~  
    这是只~~删除~~部分文本内容  
    

任务列表

  • 语法: 格式为 - + 空格 + [ ] + 空格 + 任务文本
  • 注意: 方括号 [ ] 中只能是字母 x空格
    - [ ] 这是一个任务列表,需要注意 `空格` 的位置  
    - [ ] 若方括号中为空格,则表示该复选框未勾选  
    - [X] 若方括号中为字母 `X` ,则表示该复选框已勾选  
    - [x] 方括号中的字母 `x` 不需要区分大小写  
    

Emoji 表情

  • 语法: 复制并粘贴 Emoji 表情到 Markdown 文档,或使用 Emoji 简码
  • 注意: 部分 Markdown 编辑器无法正确预览 Emoji 简码表情语法
    复制并粘贴 Emoji 表情到 Markdown 文档中  
    😉🥳🤩  
    
    使用 Emoji 简码  
    :panda_face: :sparkling_heart: :stuck_out_tongue_winking_eye:  
    

文本高亮

  • 语法: 使用两个等号 == 包围需要高亮的文本内容
  • 注意: 部分 Markdown 编辑器无法正确预览文本高亮语法
    ==这是高亮整行文本内容==  
    这是==高亮==部分文本内容  
    

下标

  • 语法: 使用单个波浪线 ~ 包围下标文本内容
  • 注意: 部分 Markdown 编辑器无法正确预览下标语法
    水分子结构式为: H~2~O  
    
    这是~下标~部分文本内容  
    

上标

  • 语法: 使用脱字符号 ^ 包围上标文本内容
  • 注意: 部分 Markdown 编辑器无法正确预览上标语法
    X 的平方表达式为: X^2^  
    
    这是^上标^部分文本内容  
    

自动 URL 链接

  • 语法: 在文档中直接输入 URL 链接地址即可
  • 注意: 部分 Markdown 编辑器无法正确预览自动 URL 链接语法
    自动将 URL 地址转为链接状态:  
    https://dancying.cn  
    
    阻止自动将 URL 转为链接,可用代码语法修饰:  
    `https://dancying.cn`  
    

总结

本文涵盖了绝大部分的 Markdown 语法规则,并且提供了我在学习 Markdown 语法时的理解和使用示例。

在我看来这些 Markdown 语法没必要全部掌握,熟悉常用的就足够了,甚至其中一些语法我都没正经使用过。

Markdown 文本在预览时会先转为 HTML 标签,所以可以在写作中适当穿插 HTML 标签来丰富文章内容。

如果有更复杂的文本编辑需求,我其实更推荐使用 Word 文档,毕竟专业的事情就要使用专业的软件。

参考链接

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
下一篇