在优化博客的过程中,因为需要写 markdown-it 插件,翻了下 markdown 的 CommonMark Spec,突然发现对 Markdown 还远不够了解:

软换行(Soft line breaks)

换行符不在行内代码或 HTML 标签内,前面没有两个或以上的空格,将解析为软换行(Soft line breaks)。渲染为 HTML 时是一个行结束符或空格
输入:

  1. foo
  2. baz

输出:

  1. <p>foo
  2. baz</p>

表现:
有的时候我觉得我不会 Markdown - 图1

硬换行(Hard line breaks)

换行符不在内联代码或 HTML 标签内,前面有两个或多个的空格,并且不在块的末尾, 将解析为硬换行(Hard line breaks) ,渲染为 HTML 时是一个

标签。
输入(注意 foo 后面有两个空格):

  1. foo
  2. baz

输出:

  1. <p>foo
  2. baz</p>

表现:
有的时候我觉得我不会 Markdown - 图2

反斜杠(backslash)

除了用于转义,在行尾的反斜杠相当于硬换行:
输入:

  1. foo\
  2. bar

输出:

  1. <p>foo
  2. bar</p>

行内代码(code span)

我们通常会用一对反引号包裹字符串,表示行内代码(code span)
输入:

  1. `foo`

输出:

  1. <p><code>foo</code></p>

表现:
有的时候我觉得我不会 Markdown - 图3
但其实行内代码只要求内联代码以反引号串开始,以同样长度的反引号串结束。
所以用多个反引号也是可以的:

  1. ```foo
  1. 输出:
  2. ```bash
  3. <p><code>foo</code></p>

围栏式代码块(Fenced code blocks)

如果你使用了至少三个连续的反引号,并且添加了换行,就会变成围栏式代码块:

  1. ```
  2. foo
  1. 输出:
  2. ```bash
  3. <pre><code>foo
  4. </code></pre>

表现:
如同行内代码,不要求必须三个反引号,只要至少三个并且前后相同就行,所以当我们想在代码块中使用三个反引号时,你可以使用四个反引号包裹:

  1. `
  1. foo
  1. ```
  2. 表现为:<br />![](https://cdn.nlark.com/yuque/0/2022/png/22749908/1653705632412-373bb2f7-e9f2-46da-bcbc-fe0cafb2fb67.png#clientId=u10829d4b-ed4c-4&crop=0&crop=0&crop=1&crop=1&from=paste&id=ue7c8b70e&margin=%5Bobject%20Object%5D&originHeight=164&originWidth=1128&originalType=url&ratio=1&rotation=0&showTitle=false&status=done&style=none&taskId=uf92f463a-7e30-4755-b936-581132e6156&title=)<br />不使用反引号,使用波浪号也是可以的,但不能混用:
  3. ```bash
  4. ~~~
  5. foo
  6. ~~~

输出:

  1. <pre><code>foo
  2. </code></pre>

缩进式代码块(Indented code blocks)

缩进式代码块由空行隔开的数个缩进块组成。
缩进块是数个非空行,每行缩进四个或多个空格
举例一个缩进块:

  1. a simple
  2. indented code block

输出:

  1. <pre><code>a simple
  2. indented code block
  3. </code></pre>

表现:
有的时候我觉得我不会 Markdown - 图4
举例由空行隔开的数个缩进块:

  1. chunk1
  2. chunk2
  3. chunk3

输出:

  1. <pre><code>chunk1
  2. chunk2
  3. chunk3
  4. </code></pre>

三个缩进块共同组成了缩进式代码块。
表现:
有的时候我觉得我不会 Markdown - 图5

链接引用定义(Link reference definitions)

链接引用定义由链接标签、冒号(:)、可选的空白、链接目标、可选的空白及可选的链接标题组成。举个例子:

  1. [foo]: /url "title"

但这只是一个定义,并不会有任何展示,就像我们在 JavaScript 中声明了一个变量一样,如果我们要使用它:

  1. [foo]

输出:

  1. <p><a href="/url" title="title">foo</a></p>

链接引用定义不对应于某个结构元素。实际上它定义了一个标签,以用于在文档其它地方的引用链接及引用类型图像。它可以出现在引用链接的前面或后面。
当在图片中使用链接引用定义时:

  1. ![foo][bar]
  2. [bar]: /url

输出:

  1. <p><img src="/url" alt="foo" /></p>

自动链接(Autolinks)

自动链接是由尖括号(<…>)包裹的绝对 URI 与 email 地址。 它将解析为链接,以 URL 或 email 地址作为链接标签。

  1. <http://foo.bar.baz>

相当于:

  1. [http://foo.bar.baz](http://foo.bar.baz)

输出为:

  1. <p><a href="http://foo.bar.baz">http://foo.bar.baz</a></p>

Setext 式标题(Setext headings)

Setext 是一种轻量级标记语言,用于格式化纯文本文档,例如电子通讯,Usenet 帖子和电子邮件。与其他一些标记语言相比,该标记易于阅读,而无需任何解析或特殊软件。
Markdown 同样提供了类似的语法:

  1. Foo *bar*
  2. =========
  3. Foo *bar*
  4. ---------

输出:

  1. <h1>Foo <em>bar</em></h1>
  2. <h2>Foo <em>bar</em></h2>

使用 =则是第一级标题,使用-字符则是第二级标题。底线长度任意。

水平线(Thematic breaks)

由 0-3 个空格的缩进及三或多个 -,_, * 字符组成的行,形成水平线。
输入:

  1. ***
  2. ---
  3. ___

输出:

  1. <hr />
  2. <hr />
  3. <hr />

表现: