【Markdown】CSDN 的 Markdown 编辑器锚点使用-进阶篇

1. 原始 Markdown 代码

1.1 “目录”元素

@[TOC](8.6 InnoDB ClusterSet 的状态和拓扑)

1.2 “1号标题-1”元素

# InnoDB ClusterSet 状态

1.3 “1号标题-2”元素

<h1>
<a id="innodb-clusterset-topology">InnoDB ClusterSet 拓扑</a>
</h1>

1.4 “1号标题-3”元素

# <a id="mysql-router-status">InnoDB ClusterSet 的 MySQL Router 状态</a>

1.5 独立 <a> 标签

<a id="standalone"></a>

1.6 跳转到独立 <a> 标签

[跳转到自定义 `<a>` 标签](#standalone)

2. 显示效果

存在两个缺陷：

1. 目录少了一个标题，@TOC并未识别到自定义的 HTML 标签 <h1> 标题。
2. 点击 “InnoDB ClusterSet 的 MySQL Router 状态” 无法跳转到对应标题，而点击 “InnoDB ClusterSet 状态” 则可以跳转到对应标题。后文会说明原因。

2.1 “目录”显示效果

2.2 “1号标题-1”元素

2.3 “1号标题-2”元素

2.4 “1号标题-3”元素

2.5 跳转到独立 <a> 标签

3. F12 开发工具查看 HTML 代码

3.1 “目录”元素

由以下代码可以看出，CSDN 的 Markdown 编辑器自动生成了一个 div 元素 toc ，内部包含一个无序列表，无序列表内却只包含两个定义的标题元素，少了一个我用 <h1> 标签自定义的标题。

<div class="toc">
 <h3><a name="t0"></a>8.6 InnoDB ClusterSet 的状态和拓扑</h3>
 <ul>
 <li>
 <a href="#InnoDB_ClusterSet__2" target="_self">InnoDB ClusterSet 状态</a>
 </li>
 <li>
 <a href="#a_idmysqlrouterstatusInnoDB_ClusterSet__MySQL_Router_a_262" target="_self"></a>
 <a id="mysql-router-status">InnoDB ClusterSet 的 MySQL Router 状态</a>
 </li>
 </ul>
</div>

3.2 “1号标题-1”元素

使用 Markdown 语法 # 标题 生成的标题，对应的自动生成的 HTML 代码为：

<h1>
<a name="t1"></a>
<a id="InnoDB_ClusterSet__2"></a>InnoDB ClusterSet 状态</h1>

在“目录”上右键查看“1号标题-1”元素的链接，为 https://blog.csdn.net/wudi53433927/article/details/128761806#InnoDB_ClusterSet__2 ，即自动生成的 id 。

3.3 “1号标题-2”元素

与前面的定义相比，多了一行代码 <a name="t2"></a> 。

<h1>
<a name="t2"></a> 
<a id="innodb-clusterset-topology">InnoDB ClusterSet 拓扑</a> 
</h1>

在“目录”上右键查看“1号标题-2”元素的链接，显示效果与“1号标题-1”元素不一样，证明不是链接，无法链接到该锚点。

3.4 “1号标题-3”元素

与前面的定义对比可知，CSDN 的 Markdown 编辑器自动生成的 HTML 多为 <h1> 标签创建了一个 <a> 标签，id="a_idmysqlrouterstatusInnoDB_ClusterSet__MySQL_Router_a_262" 的值= aid + 我定义的 <a> 标签中的 id mysql-router-status + CSDN 的 Markdown 编辑器自动生成的 HTML 规则定义的 id InnoDB_ClusterSet__MySQL_Router_a_262

<h1>
<a name="t3"></a>
<a id="a_idmysqlrouterstatusInnoDB_ClusterSet__MySQL_Router_a_262"></a>
<a id="mysql-router-status">InnoDB ClusterSet 的 MySQL Router 状态</a>
</h1>

3.5 独立 <a> 标签

<p>
<a id="standalone"></a>
</p>

1.6 跳转到独立 <a> 标签

<p>
<a href="#standalone">跳转到自定义 <code>&lt;a&gt;</code> 标签</a>
</p> 

总结

由此可知，在使用 CSDN 的 Markdown 编辑器时，如果想同时实现目录功能，与页内、页外跳转到标题的功能，可以选择：

1. 先试用目录代码 TOC 生成目录，然后：
   • 使用CSDN 的 Markdown 编辑器自动生成的锚点的名称访问，这个最便捷，只需要使用 #t1、#t2 、#t3 的方式访问标题1、2、3即可。但 HTML5 的 <a> 标签已经不支持 name 属性了。
   • 查看 CSDN 的 Markdown 编辑器自动生成的锚点 id ，然后使用该锚点 id 访问；
2. 自定义 HTML 目录元素和标题元素，需调试，与CSDN 的 Markdown 编辑器自动生成 HTML 代码规则适配。

并且，将目录代码 TOC 与 使用 <a> 和 # 定义的标题一起使用时，会破坏 TOC 原本的功能，而且无法通过页内、页外跳转到该标题。