docs: 添加示例标题与跳转锚点

Author: DangoRepo

docs/md-tutorial/basic-syntax/emphasis.md

@@ -12,6 +12,8 @@ title: Markdown 强调语法
 
 要加粗文本，请在单词或短语的前后各添加两个星号 `*` 或下划线 `_`。如需加粗一个单词或短语的中间部分用以表示强调的话，请在要加粗部分的两侧各添加两个星号 `*`。
 
+#### [**Example 7**](./para-and-line-breaks.md#eg7) {#eg7}
+
 <DemoBlock :list="[
   'I just love **bold text**.',
   'I just love __bold text__.',
@@ -22,6 +24,8 @@ title: Markdown 强调语法
 
 要用斜体显示文本，请在单词或短语前后添加一个星号 `*` 或下划线 `_`。要斜体突出单词的中间部分，请在字母前后各添加一个星号，中间不要带空格。
 
+#### [**Example 8**](./para-and-line-breaks.md#eg8) {#eg8}
+
 <DemoBlock :list="[
   'Italicized text is the *cat\'s meow*.',
   'Italicized text is the _cat\'s meow_.',
@@ -36,26 +40,36 @@ title: Markdown 强调语法
 
 3. Markdown 应用程序在如何处理单词或短语中间的下划线上并不一致。为了兼容性考虑，请统一使用两个星号 `*` 进行加粗。
 
+#### [**Example 9**](./para-and-line-breaks.md#eg9) {#eg9}
+
 ::usage-table{:list='[["ch**eck**mark", "ch__eck__mark"], ["Love is **bold**.", "Love is __bold."]]' :columns='[{"title": "建议使用"},{"title": "不建议使用"}]'}
 ::
 
 4. 如果一定要使用下划线形式的强调语法对一个词内的部分文字进行强调，请务必在语法前后使用一个空格将其隔开，否则会被视为无效语法，例如：
 
+#### [**Example 10**](./para-and-line-breaks.md#eg10) {#eg10}
+
 <DemoBlock :list="[
   'node_package_manager',
   'node _package_ manager'
 ]" />
 
-5. 通常情况下，不论你使用的是加粗、斜体、还是加粗&斜体，你左右两侧分隔符的符号数量应当永远是相等的。当分隔符的左右两侧的符号数量不对等时，Markdown 会优先识别较少的相等的部分，并将多余的部分按照普通字符进行处理。比如对于这个文本 `***Bold_Italic*****`，Markdown 会将 Italic 左侧的三个星号作为加粗与斜体的左分隔符，并在右侧的五个星号中仅取前三个星号作为右分隔符，其最终效果会是：***Bold_Italic*****。可以看到 Markdown 将右侧的第 4、5 个星号当作了普通的字符进行处理。
+5. 通常情况下，不论你使用的是加粗、斜体、还是加粗&斜体，你左右两侧分隔符的符号数量应当永远是相等的。当分隔符的左右两侧的符号数量不对等时，Markdown 会优先识别较少的相等的部分，并将多余的部分按照普通字符进行处理。
+
+    比如对于这个文本 `***Bold_Italic*****`，Markdown 会将 Italic 左侧的三个星号作为加粗与斜体的左分隔符，并在右侧的五个星号中仅取前三个星号作为右分隔符，其最终效果会是：***Bold_Italic*****。可以看到 Markdown 将右侧的第 4、5 个星号当作了普通的字符进行处理。
 
 6. 加粗与斜体可以连续使用，甚至可以套用，不过其具体的实现效果依旧按照 4 中的规则而定。下面举一个比较长的例子用以说明，为了方便理解，在这个例子里我不会混合使用两种表示方法。
 
+#### [**Example 11**](./para-and-line-breaks.md#eg11) {#eg11}
+
 <DemoBlock :list="[
   '**This is *Markdown***, *and the text in **THIS section** is bolded.*'
 ]" />
 
 7. 强调语法可以跨行使用，但此时除了不能在一行的末尾添加两个或两个以上的换行来进行换行之外，其余的换行语法均可以使用。例如：
 
+#### [**Example 12**](./para-and-line-breaks.md#eg12) {#eg12}
+
 <DemoBlock :list="[
   '**foo\nbar**',
   '**foo\<br>bar**'

docs/md-tutorial/basic-syntax/headings.md

@@ -11,6 +11,8 @@ aside: false
 
 比如，添加三个 `#` 表示创建一个三级标题（HTML 中记作 `<h3>`），例如：`### Heading level 3`。
 
+#### [**Example 1**](./headings.md#eg1) {#eg1}
+
 <DemoBlock :list="[
   '# Heading level 1',
   '## Heading level 2',
@@ -25,7 +27,7 @@ aside: false
 ::: warning 注意
 需要注意的是，不同的 Markdown 应用程序的标题语法可能有所不同。为了兼容考虑，`#` 和标题之间需要用一个空格进行分隔。
 
-::usage-table{:list='[["# Here\'s a Heading", "#Here\'s a heading"],["# Here\'s a Heading", "#Here\'s a heading"]]' :columns='[{"title": "正确用法"},{"title": "错误用法"}]'}
+::usage-table{:list='[["# Here\'s a Heading", "#Here\'s a heading"]]' :columns='[{"title": "正确用法"},{"title": "错误用法"}]'}
 ::
 
 :::

docs/md-tutorial/basic-syntax/para-and-line-breaks.md

@@ -8,6 +8,8 @@ title: Markdown 段落与换行
 
 要创建段落，请使用空白行将一行或多行文本进行分隔。
 
+#### [**Example 2**](./para-and-line-breaks.md#eg2) {#eg2}
+
 <DemoBlock :list="[
   'I\'m using Markdown to format my documents.\n\nIt\'s really convenient.',
 ]" />
@@ -17,6 +19,8 @@ title: Markdown 段落与换行
 :::warning 注意
 虽然你可能习惯了在传统文字编辑器上使用 Space 或 Tab 缩进来区分段落，但很不幸，上述两种方法在 Markdown 上均无效。请 **尤其注意** 不要在段落开头使用 Space 或 Tab 来表示段落，这会导致一些意料之外的排版问题。比如使用 Markdown 输入以下内容（`&nbsp;` 为空格）：
 
+#### [**Example 3**](./para-and-line-breaks.md#eg3) {#eg3}
+
 <DemoBlock :list="[
   '    如果你使用空格在 Markdown 中来区分段落，则会产生这种问题。',
 ]" />
@@ -28,14 +32,17 @@ title: Markdown 段落与换行
 ## Markdown 换行语法 {#line-breaks}
 
 Markdown 有以下几种语法格式来实现换行：
+
 1. 在一行的末尾添加两个或两个以上的换行（在 HTML 中处理为 `<br>`）。
 2. 在一行的末尾添加两个或两个以上的空格，随后键入一次换行。
 3. 在一行的末尾添加一个反斜杠 `\`，随后键入一次换行。
 
 :::tip
-因为直接使用空格效果不足够明显，在本篇以及后续的教程中，我会使用 `·` 来代替一个空格。
+因为直接使用空格效果不足够明显，你可以选中对应的 Markdown 示例文本来查看空格。
 :::
 
+#### [**Example 4**](./para-and-line-breaks.md#eg4) {#eg4}
+
 <DemoBlock :list="[
   'First line\n\nSecond line',
   'First line  \nSecond line',
@@ -48,20 +55,26 @@ Markdown 有以下几种语法格式来实现换行：
 
 1. 换行语法不能在行间代码块中使用：
 
+#### [**Example 4**](./para-and-line-breaks.md#eg4) {#eg4}
+
 <DemoBlock :list="[
   '`code<br>span`',
   '`code  <br>span`'
 ]" />
 
 2. 换行语法不能在 HTML 标签中使用。不过准确来说这应该属于 HTML 语法的规则：
 
+#### [**Example 5**](./para-and-line-breaks.md#eg5) {#eg5}
+
 |      Markdown 语法    |         预览效果       |
 |:--------------------- |:------------------------|
 | `<a href="code\`<br>`span">` | 无效语法 |
 | `<a href="code&nbsp;&nbsp;`<br>`span">` | 无效语法 |
 
 3. 无论使用哪种换行，换行语法后都应该至少接一个新的行，否则换行语法会被当作普通文本处理：
 
+#### [**Example 6**](./para-and-line-breaks.md#eg6) {#eg6}
+
 <DemoBlock :list="[
   'foo\\',
   'foo  ',
@@ -72,4 +85,3 @@ Markdown 有以下几种语法格式来实现换行：
 :::details 补充
 4. GitHub 在支持以上全部语法的前提下，为了照顾部分不熟悉或不适应 Markdown "双换行"的换行方式的用户，自行拓展了另外一种换行方式，GitHub 的文档称之为“软换行”。它与前面所说的方法 1 相似，但区别是 GitHub 的这个扩展语法仅需在行尾使用一次换行即可，就像平时在 Word 或者记事本中换行一样。
 :::
-