Markdown 语法大全-工具盒子

基本语法 {#基本语法}

标题 {#标题}

要创建标题的话只需使用井号 # 开头，井号的数量对应标题的级别。比如，你想要创建一个 <h3></h3> ，则可以通过用三个 # 来代替。

|-----------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 | hljs markdown ### 标题内容 ` <div class="code-widget-light code-widget copy-btn" data-clipboard-snippet=""> <i class="iconfont icon-copy"> </i> MARKDOWN </div> </pre></td> </tr> ` |

为了不影响目录层级，这里就不展示了。

标题的井号后面务必要记得加上一个空格。
段落之间的标题最好使用空行分隔，因为有的 Markdown 引擎不识别缺少前后空行的标题。

段落 {#段落}

要创建段落，直接使用空行分隔文本即可。

|---------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 | hljs txt 这是一个普通段落这是另一个普通段落 ` <div class="code-widget-light code-widget copy-btn" data-clipboard-snippet=""> <i class="iconfont icon-copy"> </i> TXT </div> </pre></td> </tr> ` |

这是一个普通段落

这是另一个普通段落
中文传统排版上段落开头有着"空两格"的习惯，可以使用全角空格或者 HTML 实体 &emsp; 。

|-------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 | hljs txt 　这是一个开头空两格的段落 &emsp;这是一个开头空两格的段落 ` <div class="code-widget-light code-widget copy-btn" data-clipboard-snippet=""> <i class="iconfont icon-copy"> </i> TXT </div> </pre></td> </tr> ` |

　这是一个开头空两格的段落
这是一个开头空两格的段落

加粗和斜体 {#加粗和斜体}

加粗：
要加粗文本可以使用两个星号 ** 或者两个下划线 __ 包裹待加粗的文本来实现。

|-------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 | hljs markdown 把文本 **加粗** 一下把文本 __加粗__ 一下 ` <div class="code-widget-light code-widget copy-btn" data-clipboard-snippet=""> <i class="iconfont icon-copy"> </i> MARKDOWN </div> </pre></td> </tr> ` |

把文本加粗一下
把文本加粗一下
加粗用星号和用下划线的不同之处在于星号用法前后可以不加空格，但下划线必须要加。

|-------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 | hljs markdown 把文本 **加粗** 一下把文本 __加粗__ 一下 ` <div class="code-widget-light code-widget copy-btn" data-clipboard-snippet=""> <i class="iconfont icon-copy"> </i> MARKDOWN </div> </pre></td> </tr> ` |

把文本加粗一下
把文本__加粗__一下

斜体：
要使文本斜体，可以使用一个星号 * 或者一个下划线 _ 包裹待斜体的文本。

|-------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 | hljs markdown 这两个字是 *斜体* 着的这两个字是 _斜体_ 着的 ` <div class="code-widget-light code-widget copy-btn" data-clipboard-snippet=""> <i class="iconfont icon-copy"> </i> MARKDOWN </div> </pre></td> </tr> ` |

这两个字是斜体着的
这两个字是斜体着的
和加粗类似，如果使用了下划线的方式左右一定要记得加空格，一般为了兼容考虑，不建议使用下划线的方式。

加粗并斜体 {#加粗并斜体}

如果你需要加粗的同时使文本斜体，可以使用三个星号 *** 或者三个下划线 ___ 包裹待斜体的文本。

|-------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 | hljs markdown 同时 ** *加粗并斜体* ** 的示例同时 __ _加粗并斜体_ __ 的示例 ` <div class="code-widget-light code-widget copy-btn" data-clipboard-snippet=""> <i class="iconfont icon-copy"> </i> MARKDOWN </div> </pre></td> </tr> ` |

同时 加粗并斜体 的示例
同时 加粗并斜体 的示例
无论是加粗还是斜体，请尽量使用星号的方式，中间不要带空格。

分割线 {#分割线}

创建分割线可以通过三个星号 *** 或者三个短横线 --- 或者三个下划线 ___ 来创建分割线。

|---------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 | hljs markdown *** --- __ _ ` <div class="code-widget-light code-widget copy-btn" data-clipboard-snippet=""> <i class="iconfont icon-copy"> </i> MARKDOWN </div> </pre></td> </tr> ` |

删除线 {#删除线}

创建删除线可以通过一个波浪线 ~ 或两个波浪线 ~~ 包裹待删除的文本。

我 ~~经常~~ 在我的博客上写文章
我 ~~经常~~ 在我的博客上写文章

链接 {#链接}

普通链接：
可以通过 [链接文本](URL) 来创建普通链接。

|-----------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 | hljs markdown 推荐阅读：[ Markdown 教程 ]( https://www.runoob.com/markdown/md-tutorial.html ) ` <div class="code-widget-light code-widget copy-btn" data-clipboard-snippet=""> <i class="iconfont icon-copy"> </i> MARKDOWN </div> </pre></td> </tr> ` |

图片 {#图片}

使用感叹号 ! 后跟普通链接 []() 就可以渲染图片了。

|-----------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 | hljs markdown ![ Logo ]( http://static.51tbox.com/static/2024-12-13/col/1b8b0295cb9ecfe953dac9a896907c86/b1fb1e684c3e4b39a5fa7f286782c35a.png.jpg ) ` <div class="code-widget-light code-widget copy-btn" data-clipboard-snippet=""> <i class="iconfont icon-copy"> </i> MARKDOWN </div> </pre></td> </tr> ` |

Logo

链接图片 {#链接图片}

给图片增加链接，请将图像的 Markdown 括在普通链接的方括号 [] 中。

|-----------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 | hljs markdown [ ![Logo ]( http://static.51tbox.com/static/2024-12-13/col/1b8b0295cb9ecfe953dac9a896907c86/b1fb1e684c3e4b39a5fa7f286782c35a.png.jpg )]( https://xukaiyyds.cn ) ` <div class="code-widget-light code-widget copy-btn" data-clipboard-snippet=""> <i class="iconfont icon-copy"> </i> MARKDOWN </div> </pre></td> </tr> ` |

扩展语法 {#扩展语法}

列表 {#列表}

有序列表：
有序列表可以通过阿拉伯数字后跟 . 或者 ) 来创建，数字不必递增连续，但是应当以数字 1 起始。

列表项一
列表项二

列表项一
列表项二

无序列表：
无序列表可以通过短横线 - 或者星号 * 或者加号 + 来开头，后面需要跟一个空格来分隔文本内容。

|---------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 | hljs markdown - 列表项二 * 列表项一 + 列表项三 ` <div class="code-widget-light code-widget copy-btn" data-clipboard-snippet=""> <i class="iconfont icon-copy"> </i> MARKDOWN </div> </pre></td> </tr> ` |

列表项二

列表项一

列表项三

任务列表：
通过在普通列表项中添加 - [x] 或者 - [ ] 来渲染任务列表项。

|-------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 | hljs markdown - [x] 待办事项一 - [ ] 待办事项二 ` <div class="code-widget-light code-widget copy-btn" data-clipboard-snippet=""> <i class="iconfont icon-copy"> </i> MARKDOWN </div> </pre></td> </tr> ` |

[x] 待办事项一
[ ] 待办事项二

代码块 {#代码块}

推荐使用围栏代码块语法来排版代码块，即使用 ``` 来包裹代码块，并且指定语法高亮语言。

html 语法高亮：

|---------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 | hljs html ```html < html > < head > </ head > </ html > ``` ` <div class="code-widget-light code-widget copy-btn" data-clipboard-snippet=""> <i class="iconfont icon-copy"> </i> HTML </div> </pre></td> </tr> ` |

json 语法高亮：

|-----------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 | hljs json ```json { "firstName" : "John" , "lastName" : "Smith" , "age" : 25 } ``` ` <div class="code-widget-light code-widget copy-btn" data-clipboard-snippet=""> <i class="iconfont icon-copy"> </i> JSON </div> </pre></td> </tr> ` |

如果需要展示代码块原文 Markdown（就像上面展示的例子那样），可以在最外层使用更多数量的反引号开始，闭合的反引号数量等于开始的数量即可。

|---------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 | hljs json ````json ``` { "firstName" : "John" , "lastName" : "Smith" , "age" : 25 } ``` ```` ` <div class="code-widget-light code-widget copy-btn" data-clipboard-snippet=""> <i class="iconfont icon-copy"> </i> JSON </div> </pre></td> </tr> ` |

表格 {#表格}

表格排版：
使用短横线 - 来分隔表头和表身，使用竖线 | 来分隔列，每行开头和结尾的竖线是可选的。

| Syntax | Description | |-----------|-------------| | Header | Title | | Paragraph | Text |

表格中的内容也可以进行排版，比如加粗、斜体、行内代码、插入链接等。但仅限于使用"行级元素"进行排版，不能使用"块级元素"，比如不能使用标题、列表、代码块、块引用等。

表格对齐：
如果需要左对齐、居中对齐或者右对齐表格内容，可以通过在 --- 中添加冒号 : 实现。冒号仅出现在左边表示左对齐，出现在两边表示居中对齐，仅出现在右边表示右对齐。

| test left | test center | test right | |:----------|:-----------:|-----------:| | test | test | test | | test | test | test |

如果需要在表格内容中使用竖线 | ，那就需要对其进行转义。可以使用 \| 转义，但更稳妥的做法是写竖线的 HTML 实体 | 表示，因为有的 Markdown 引擎不能正确处理表格内容中的 \| 。

块引用 {#块引用}

块引用的使用：
要创建块引用的话仅需在段落前加上大于号 > 。

|---------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 | hljs markdown > 原谅我这一生不羁放纵爱自由，也会怕有一天会跌倒 > 背弃了理想，谁人都可以 > 哪会怕有一天只你共我 ` <div class="code-widget-light code-widget copy-btn" data-clipboard-snippet=""> <i class="iconfont icon-copy"> </i> MARKDOWN </div> </pre></td> </tr> ` |

原谅我这一生不羁放纵爱自由，也会怕有一天会跌倒
背弃了理想，谁人都可以
哪会怕有一天只你共我

块引用分段：
如果需要分段的话可以在分段空行前加上一个大于号 > 。

原谅我这一生不羁放纵爱自由，也会怕有一天会跌倒
背弃了理想，谁人都可以

哪会怕有一天只你共我

块引用嵌套：
块引用可以嵌套使用，在段落前添加两个大于号 >> 表示两层嵌套。

原谅我这一生不羁放纵爱自由，也会怕有一天会跌倒
背弃了理想，谁人都可以

哪会怕有一天只你共我

块引用包含其它元素：
CommonMark 规范将块引用定义为容器块，容器块可以包含任意块级元素和行级元素，也就是说块引用可以包含其他任意元素。

列表是块级元素

列表是块级元素

加粗和斜体是行级元素

脚注 {#脚注}

脚注允许你添加注释和引用，而不会使文档正文混乱。当你创建脚注时，带有链接的上标数字会出现在你引用脚注的位置。读者可以单击链接以跳转至页面底部的脚注内容处。

|-----------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 | hljs markdown 本文参考了 [ Markdown 官方教程 ]( https://markdown.com.cn/ ) 的基本语法[^1] 和扩展语法[^2]。 [ ^1 ]: [ Markdown 基本语法 | Markdown 官方教程 ]( https://markdown.com.cn/basic-syntax/ ) [ ^2 ]: [ Markdown 扩展语法 | Markdown 官方教程 ]( https://markdown.com.cn/extended-syntax/ ) ` <div class="code-widget-light code-widget copy-btn" data-clipboard-snippet=""> <i class="iconfont icon-copy"> </i> MARKDOWN </div> </pre></td> </tr> ` |

本文参考了 Markdown 官方教程的基本语法 ^[1]^ 和扩展语法 ^[2]^ 。{#fnref:2}

转义字符 {#转义字符}

几乎所有 ASCII 标点符号都可以使用反斜杠 \ 进行转义。

|-----------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 | hljs markdown \\（反斜杠）\`（反引号）\ *（星号）\_（下划线）\{}（花括号）\[]（方括号）\()（圆括号） ` <div class="code-widget-light code-widget copy-btn" data-clipboard-snippet=""> <i class="iconfont icon-copy"> </i> MARKDOWN </div> </pre></td> </tr> ` |

\（反斜杠）`（反引号）*（星号）_（下划线）{}（花括号）[]（方括号）()（圆括号）

嵌入 HTML {#嵌入-HTML}

这在需要设置图片大小或者字体颜色时会比较有用，但我并不建议过多使用 HTML 来进行排版，一来是因为这样做实际上并不通用，因为有的 Markdown 引擎因为安全原因会过滤部分标签或者属性；二来是因为这样做太不 Markdown 了！

Markdown 和 HTML 混合排版
另外，请勿在 HTML 中嵌入 Markdown，这样的话它并不会工作。

|-----------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 | hljs markdown < p > **粗体** 不会生效 </ p > ` <div class="code-widget-light code-widget copy-btn" data-clipboard-snippet=""> <i class="iconfont icon-copy"> </i> MARKDOWN </div> </pre></td> </tr> ` |

**粗体**不会生效