书接前文 Markdown 进阶玩法

前几天写了一篇关于 Markdown 的科普文章Markdown 基础语法 ⇲，本文继续探讨 Markdown 相关扩展语法。

图片[1] - 书接前文 Markdown 进阶玩法 - 易航博客

内嵌HTML标签

Markdown 语法的标记相较于 HTML 还是小菜一碟，当然作为一种写作格式语言，大部分时候是够用的。如果需要进一步优化文字视觉表现力，可以在 Markdown 中内置一些 HTML 和 CSS 样式来改善。

使用时，只需使用 HTML 本身标签即可，无需在其前面添加前缀或分隔符来表明你正在从 Markdown 切换到 HTML。

行内标签

HTML 的行内标签如<span>、<cite>、<del>不受限制，可以在 Markdown 的段落、列表或是标题里任意使用。如果你喜欢，可以直接采用 HTML 标签来格式化。

Less is <strong>more</strong>.（strong 是 HTML 加粗标签）

<strong> 标签渲染效果如下：

Less is more .

内嵌 CSS 样式

还可以在 Markdown 中嵌入 CSS 样式，和HTML一起使用。

例如，给段落加 CSS 样式：

<p style="color:#009;font-style:italic;"></p>

换了颜色及倾斜后渲染效果如下：

Life is the art of drawing sufficient conclusions form insufficient premises.

区块标签

使用 HTML 区块标签 <div>、<table>、<pre>、<p> 时，必须在前后加上空行与其它内容区隔开，开始标签和结束标签不能用Tab或空格来缩进。

例如在 Markdown 文件里插入 HTML 表格：

<table>
    <tr>
        <td>Name</td>
        <td>Age</td>
        <td>No.</td>
    </tr>
    <tr>
        <td>Tom</td>
        <td>21</td>
        <td>01</td>
    </tr>
</table>

标签渲染效果如下：

Name	Age	No.
Tom	21	01

要注意的是，在 HTML 区块标签间的 Markdown 格式语法将不会被处理。比如在 HTML 区块内使用 Markdown 样式的 *强调* 会没有效果。

插入视频

Markdown 不具有插入视频的功能，好在我们依然可以利用它支持 HTML 标签的特性，用 <video> 标签来插入视频。

视频插入格式如下：

<video width="100%" controls src="https://txmov2.a.kwimgs.com/upic/2025/02/14/20/BMjAyNTAyMTQyMDQzMzZfMTMxMzM1NzkxNF8xNTY5NDg0Mzg5NzVfMl8z_b_B7664d41afc4fb15f0f117a1ffe825663.mp4"></video>

显示效果如下：

标题 ID

许多 Markdown 编辑器支持标题的自定义 ID，方便直接链接到标题并使用 CSS 对其修改。

书写格式是在标题后边用大括号包裹自定义的 ID 。

##### Have a nice day {#my-id}

对应 HTML 是这样的：

<h5 id="my-id">Have a nice day</h5>

<h5> 标签渲染效果如下：

Have a nice day

页内锚点跳转

利用指定标题 ID ，通过链接格式可实现页面内目录跳转，链接锚点会自动滚动到屏幕顶端。

把指定 ID 放在标题后面，注意大括号左边的空格不可少。

### Test title {#custom}
[Jump here](#custom)

如果 Markdown 工具不支持上述 {#custome} 语法（比如MarktText），还可以使用 span 标签，为元素添加 id 来实现。

<span id ="custom">Test title</span>
[Jump here](#custom)

跳转渲染效果如下：

Test title
Jump here

任务列表

创建带有复选框的 TODO List 任务列表，请在任务列表前面添加破折号-和方括号[ ]，注意，破折号和方括号之间，以及方括号里面要加空格。选择哪个复选框，就在方括号[x]里面添加 x 。

- [x] This is the first one
- [ ] This is the first two

复选框渲染效果如下：

This is the first one
This is the first two

定义列表

简单来说，就是对多个术语的定义和描述。要创建定义列表，请在第一行上键入术语。在下一行，输入一个冒号，后跟一个空格和详细定义。

Frist List
: This is the List Description

Second List
: This is another List Description

对应 HTML 像这样：

<dl>
    <dt>Frist List</dt>
    <dd>This is the List Description</dd>
    <dt>Second List</dt>
    <dd>This is another List Description</dd>
</dl>

渲染效果如下：

Frist List
This is the List Description
Second List
This is another List Description

围栏代码块

基本 Markdown 语法允许你通过缩进四个空格或一个制表符来创建代码块，如果觉得不方便，可以尝试用围栏代码块。

在代码块前后使用三个反引号`，或三个波浪号~~~。

\```json
{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25,
}
\```

如果想让代码高亮显示，在代码块的反引号后面指定一种语言，比如 Java：

\```java
  System.out.println(Hello World);
\```

渲染效果如下：

System.out.println(Hello World);

表格

在 Markdown 基础篇里我们介绍了创建表格的方法，这里再扩展一下表格的样式。

单元格宽度可以通过横向连字符--自由控制。

| No. | Age     | Time |
| --| ------- | -------- |
| 18  | 24      | 2025.01.21 |

如下所示，渲染效果看起来相同。

No.	Age	Time
18	24	2025.01.21

在连字符---左侧、右侧或两侧添加冒号:，来控制列表文本左、右、中对齐。

| No. | Name    | Birthday      |
| :-- | :-----: | ------------: |
| 18  | 24      | 08.18         |

渲染效果如下：

No.	Name	Birthday
18	24	08.18

Emoji表情

有两种方法可以将表情符号添加到 Markdown 文本中，一是从 emojipedia 网站上复制表情符号并粘贴到文本中，另外一种是直接输入 emoji shortcodes，使其包裹在两个冒号中间。

*刚出去散步* :Walking:
*看见了一只猫咪* :cat:

表情符号渲染效果如下：

刚出去散步 🚶‍♂️

看见了一只猫咪 🐱

反斜杠转义

有时候会希望插入一些符号而不想被当作 Markdown 标记渲染，就需要对这些符号进行转义。方法是，在字符前面添加反斜杠字符\。

例如，我想用星号*加在文字旁边做强调效果，可以这样写：

\* Are you OK?

渲染效果如下：

* Are you OK?

可转义的字符

Markdown 支持以下这些符号前面加上反斜杠，从而达到转义目的。

\   backslash
`   backtick
*   asterisk
_   underscore
{}  curly braces
[]  square brackets
()  parentheses
#   hash mark
+   plus sign
-   minus sign (hyphen)
.   dot
!   exclamation mark

特殊字符自转义

在 HTML 中，有两个字符需要特殊处理：< 和 &。左尖括号用于开始标记；＆ 符号用于表示 HTML 实体。如果要将它们用作文字字符，则必须将它们转义为实体，例如 < 和 &。

比如你想写关于“AT&T”的内容，你需要写“AT&T”。还需要在 URL 中转义＆字符，如果你想链接到：

...&q=larry+bird

必须将 URL 编码为：

...&amp;q=larry+bird

才能放到标签 href 属性中，这很容易被忘记。Markdown 允许你直接使用这些符号，并帮你自动处理所有必要的转义。如果你使用&符号作为 HTML 实体的一部分，它将保持不变，否则它将被翻译成&。

因此，如果想在文章中包含版权符号，可以这样写：

© 印迹说（符号代码 &copy;）

Markdown 不会对它做修改，但如果你写：

AT&T

Markdown 会将其翻译为：

AT&amp;;T

类似地，由于 Markdown 支持行内 HTML，如果你使用尖括号<作为 HTML 标签的分隔符，Markdown 不会对其做任何转义，但如果你这样写：

4 < 5

Markdown 会将其翻译为：

4 &lt; 5

另外要注意的是，在 Markdown 内联和块元素中，<尖括号和&符号始终会自动编码。这使得使用 Markdown 编写 HTML 代码变得容易（在 HTML 语法中，你要手动把所有的 < 和 & 都转换为 HTML 实体。）

自动 URL 链接

许多 Markdown 编辑器会自动将 URL 或者 email 地址转换为链接，输入网址时，即使没使用尖括号<，Markdown 编辑器也会自动转为可点击链接。

https://mp.weixin.qq.com

如果想禁用自动链接 URL，则可以通过反引号`来删除该链接。

`https://mp.weixin.qq.com`

脚注

脚注用于添加注释和参考来源，添加脚注时，带有脚注的上标数字会出现在添加脚注参考的位置。这样做的好处是，能保持文档的整洁性。

创建方法是，在方括号内[^1]添加插入符号和标识符，标识符可以是数字或单词，但不能包含空格或制表符。

[^1]: This is the first footnote.
[^2]: This is the second footnote.

Markdown 语法的最大灵感来源是纯文本电子邮件的格式，旨在尽可能地易于阅读和易于编写。因此，Markdown 的语法完全由标点符号组成，这些标点符号经过精心挑选，以使其看起来像它们的意思。

由于公众号并不能完全兼容 Markdown 所有标记语法，导致一些演示效果与实际效果有细微差异，还由于不能插入外部链接，有一些语法不能完整呈现，不过并不影响作为 Markdown 备忘录学习。