Markdown锚点跳转失败的解决办法

Markdown 标题含特殊字符时,自动生成的锚点 ID 可能与目录链接不一致,用 <a> 标签手动定义锚点即可解决。

目录

前情提要

在浏览我前几天的一篇博文《Claude Code 终端高效使用指南》时,发现从目录链接无法跳转到标题 "五、快速前缀:/ ! @ 三板斧"

博文目录中的写法:

markdown 复制代码
- [五、快速前缀:`/` `!` `@` 三板斧](#五快速前缀--三板斧)

博文正文标题

markdown 复制代码
## 五、快速前缀:`/` `!` `@` 三板斧

分析问题

问题在于:目录里写的锚点 #五快速前缀--三板斧 和 Markdown 渲染器根据标题自动生成的 HTML id 不一致,导致点击目录链接时找不到目标位置。

标题中含有 /!@ 等特殊符号,渲染器在生成锚点时会如何处理这些字符?------可能直接删除,也可能替换为 -,甚至编码成其他形式。总之,锚点对不上,自然无法跳转

那么,如何准确获知实际的 id?一个更可控的办法是:不依赖自动生成,自己指定。

解决方法

在标题上方放置一个 <a> 标签,手动定义锚点 ID:

html 复制代码
<a id="five-fast-prefix"></a>

## 五、快速前缀:`/` `!` `@` 三板斧

目录中直接引用这个自定义 ID:

markdown 复制代码
- [五、快速前缀...](#five-fast-prefix)

你也可以用中文作为 id,比如 id="五快速前缀",但要确保没有空格和特殊符号

效果

点击目录中"五、快速前缀:/ ! @ 三板斧",可以正常跳转到正文了。