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 hello_world():
            print('hello world')
        ```
        - 使用围栏代码块语法时,只需缩进 `四个空格`  
        - 直接缩进 `八个空格` 也能嵌套代码块,此方法建议在代码块前后各留一行空行  
    
    - 这是一个无序列表,并在列表中嵌套图片  
        <img src='https://www.dancying.com/assets/images/18141451_p1.jpg'>  
    

代码

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

分割线

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

链接

普通链接

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

链接标题

  • 语法: 格式为 [链接文本] + (链接URL "标题文字")
  • 注意: 其 链接URL标题文字 之间有一个 空格
  • 标题: 鼠标悬停在链接上时显示的提示文字,这是可选内容
    这是一个带有标题的链接地址:  
    [Dancying的个人博客](https://dancying.github.io/ "这是一段描述标题,跟在URL后面并以空格隔开")  
    

快速链接

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

引用型链接

  • 语法: 格式为 [链接文本] + : 链接URL 可选标题
  • 建议: 第二个 label 部分,在前后各留一行空白行
    第一部分: `[链接文本]`  
    其中 `label` 可以是数字、字母、空格或标点符号,不区分大小写  
    并且 `[链接文本]``` 之间可以用一个 `空格` 分隔  
    以下都是合法的例子
    
    [Dancying的个人博客][1234567890]  
    [Dancying的个人博客] [abc123]  
    [Dancying的个人博客] [!@#$%^&*()_+]  
    
    ---
    
    第二部分: `: 链接URL 可选标题`  
    其中 `label` 与第一部分 `label` 一致  
    链接URL可以用 `<>` 括起来,但 `<>` 不是必须的  
    标题需要用双引号 `""` 、单引号 `''` 、括号 `()` 中的一种包起来  
    不要遗漏冒号 `:` 后的 `空格` ,不要遗漏 `链接URL``可选标题` 之间的 `空格`  
    第二部分可以放在文章的任何部分,比如当作尾注或脚注  
    以下都是合法的例子
    
    [1234567890]: https://dancying.github.io/
    [ABC123]: https://dancying.github.io/ "这是一个描述标题"
    [!@#$%^&*()_+]: https://dancying.github.io/ (这是一个描述标题)
    
    注意:带 `url``label` 部分(即第二部分),建议前后各留空一行
    
    ---
    
    根据我的实验,以下的例子也是能够使用的  
    带链接URL的第二部分,需要在前面留至少一行空行  
    [Dancying的个人博客]  
    
    [Dancying的个人博客]: https://dancying.github.io/
    
    ---
    
    Tips : 如果要往文档中插入 base64 的图片,可以用这种方式把 base64 的图片统一放到文末管理
    

图片

  • 语法: 符号 ! + [图片描述] + (图片URL)
  • 注意: 图片和普通链接的区别仅为一个 ! 英文感叹号
    这是一个普通的图片展示  
    ![Dancying博客网站的头像](https://dancying.com/assets/images/18141451_p1.jpg)
    
    给图片添加链接URL:  
    只需将图片的 Markdown 语法作为普通链接的 `链接文本`  
    [![Dancying博客网站的头像](https://dancying.com/assets/images/18141451_p2.jpg)](https://dancying.github.io/)
    
    也可以直接使用 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 start():
        print("hello world")
    ```
    
    ```python
    # 这是使用语法高亮的代码块文本  
    # 只需在开始的三个单引号后面加上语言类型即可  
    def start():
        print("hello world")
    ```
    

脚注

  • 语法: 格式为 [^标识符] + [^标识符]: 脚注说明
  • 注意: 其中 标识符 为数字或字母,不能包含 空格制表符
    这是一个仅有数字的脚注例子[^1234567]  
    这是一个字母数字的脚注例子[^123abcd]  
    
    [^1234567]: 这是一个脚注说明;
    脚注可以放在段落出现前,也可以放在段落出现后
    [^123abcd]: 这也是一个脚注说明;
    脚注说明可以使用 `代码`**加粗***倾斜* 等元素修饰
    注意不要把脚注说明放在列表、块引用或表格等元素中
    

标题ID

  • 语法: 格式为 title + 空格 + {#title-id}
  • 注意: 将 .md 文件渲染为 .html 文件后才能看出效果
    这是一个自定义标题 ID 的例子  
    ### 这是标题内容 {#这是标题的ID}
    
    将这个标题 ID 所在的 Markdown 文件渲染为 HTML 文件后,其对应的 HTML 代码为  
    <h3 id="这是标题的ID">这是标题内容</h3>
    
    需要注意,Markdown 编辑器会将大括号 `{}` 里的内容也识别为标题的一部分  
    所以需要将 Markdown 文件渲染为 HTML 文件,或者直接使用对应的 HTML 代码  
    
    可以使用链接的形式,跳转到对应的标题 ID 部分的内容  
    [这是链接文本](#这是标题的ID)  
    或者使用完整的网页链接地址  
    [这是链接文本](https://dancying.github.io/windows/Markdown-Syntax/#%E9%93%BE%E6%8E%A5)
    

定义列表

  • 语法: 格式为 列表的标题 + 换行 + : 列表内容
  • 注意: 其中的 列表的标题 前都需要留一行空白行
    这是第一个列表的标题
    : 列表内容需要换行,并以冒号 `:` 开头
    : 冒号后面需要有一个 `空格` 
    
    这是第二个列表的标题
    : 列表的标题前需要留一行空行
    : 不同的 Markdown 编辑器渲染出来的效果可能不同
    : 有些编辑器渲染后的列表内容会缩进,有些就不会缩进
    

删除线

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

任务列表

  • 语法: 格式为 - + 空格 + [ ]
  • 注意: 方括号 [ ] 后面也要接一个 空格
    - [ ] 这是一个任务列表的例子,注意 `空格` 的位置  
    - [ ] 若方括号 `[ ]` 中为空格,则代表未勾选复选框  
    - [X] 可将方括号 `[ ]` 中的空格替换为字母 `x` ,不分大小写  
    - [x] 有字母 `X` 则代表该复选框已被勾选  
    

Emoji表情

  • 语法: 直接复制并粘贴 Emoji 表情到 Markdown 文档中,或使用 Emoji 简码
  • 注意: 在静态网页中使用 Emoji 表情,需要确保 .html 文件为 UTF-8 编码
    直接复制粘贴 Emoji 表情到 Markdown 文档中,如下:  
    😉🥳🤩  
    
    使用 Emoji 简码,如下:  
    :panda_face::sparkling_heart::stuck_out_tongue_winking_eye:
    - Emoji 简码并不是所有的 Markdown 编辑器都能识别  
    - 所以还是推荐直接复制粘贴  
    

文本高亮

  • 语法: 使用两个等号 == 包围需要高亮的文本内容
  • 注意: 不是所有的 Markdown 编辑器都能识别文本高亮语法
    ==这是高亮一整个段落==  
    这是==高亮==部分内容  
    

下标

  • 语法: 使用单个波浪线 ~ 包围下标文本内容
  • 注意: 不是所有的 Markdown 编辑器都能识别下标语法
    这是一个下标的例子:水分子  
    H~2~O  
    
    这是正常语句,~这是一句下标语句~
    

上标

  • 语法: 使用脱字符号 ^ 包围上标文本内容
  • 注意: 不是所有的 Markdown 编辑器都能识别上标语法
    这是一个上标的例子:X 的平方  
    X^2^  
    
    这是正常语句,^这是一句上标语句^  
    

自动URL链接

  • 语法: 直接输入 URL 链接即可
  • 注意: 不是所有的 Markdown 编辑器都能自动将 URL 转为可点击的链接
    一些 Markdown 编辑器能自动将 URL 转为可点击的链接  
    这是一个例子:https://dancying.github.io/  
    
    如果不需要将 URL 自动转为可点击的链接,可以用代码修饰 URL 文本  
    这是一个例子:`https://dancying.github.io/`  
    

总结

掌握这些 Markdown 语法基本就够用了,甚至只需要掌握部分常用的语法也能应付大多数场景。

更为复杂的文本内容建议交给 Word 文档处理,毕竟术业有专攻。

参考链接

暂无评论

发送评论 编辑评论


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