在前端开发中，Markdown 已经成为了日常用语。而 Markdown 的语法中，标题是很常见的元素。在使用 Markdown 进行文章编写的过程中，经常需要给每个标题添加锚点，以便用户可以直接跳转到所需要的部分。那么，如何给 Markdown 的标题添加锚点是一个非常值得探究的问题。
此时，npm 包 @enyaxu/markdown-it-anchor 的出现，就是解决这个问题的良方。本文将详细介绍此 npm 包的使用方法，以及对于解决标题锚点问题产生的一些指导意义。
@enyaxu/markdown-it-anchor 包的安装
在使用 @enyaxu/markdown-it-anchor 包之前，需要进行安装。使用 npm 进行安装即可，具体命令如下：
npm install @enyaxu/markdown-it-anchor
@enyaxu/markdown-it-anchor 包的使用
使用 @enyaxu/markdown-it-anchor 包为 Markdown 文档中的标题添加锚点和 ID，需要先加载和配置 markdown-it-renderer。以 Vue 为例，通常是在 Vue 单文件组件的 Script 区域中配置。
在 Vue 单文件组件的 Script 区域中导入依赖：
import MarkdownIt from "markdown-it"; import MarkdownItAnchor from "@enyaxu/markdown-it-anchor";
接着，为 markdown-it-renderer 添加插件以启动 @enyaxu/markdown-it-anchor 包：
import MarkdownIt from "markdown-it"; import MarkdownItAnchor from "@enyaxu/markdown-it-anchor"; const md = new MarkdownIt(); md.use(MarkdownItAnchor);
在上面的代码中，我们新建了一个 MarkdownIt 实例化对象 md，然后为其添加 MarkdownItAnchor 插件，实际上是调用了 @enyaxu/markdown-it-anchor 包的功能。上述代码执行后，@enyaxu/markdown-it-anchor 的功能就会生效。
@enyaxu/markdown-it-anchor 包的参数设定
默认情况下，@enyaxu/markdown-it-anchor 包会为 Markdown 标题自动添加锚点和 ID。但是，我们还可以在 use() 方法中，通过传递一个可选参数对象，来设定锚点的生成规则。
此时，我们可以将如下的方法传递为 use() 方法的参数：
md.use(MarkdownItAnchor, {
level: 2,
permalink: true,
permalinkBefore: true
});在上述代码中，我们设定了两个参数 level 和 permalink。其中 level 参数指定了只在二级标题（即 <h2> 标签）中添加锚点；permalink 参数表示同时生成一个永久链接，便于读者分享和参考。设定好参数后，随后我们就能够进行文中锚点的添加，达到我们想要的效果。
@enyaxu/markdown-it-anchor 包的指导意义
@enyaxu/markdown-it-anchor 包的出现，不仅仅是为了解决 Markdown 标题锚点的问题。它的存在也是为了引起开发者对于优化网页中锚点这一问题的一系列思考。比如，我们可以考虑如何让用 Markdown 编写的文章，拥有更好的索引访问体验，从而提高用户阅读体验。我们可以通过在 Markdown 编写的文章中服从特定的 titles 标题格式，自动生成页面内全局索引，并利用前端能力使其更加贴近用户需求。这方面的开发技能，在前端技术的发展中有着极重要的作用。
最后，下面举一个使用 @enyaxu/markdown-it-anchor 增加锚点的例子：
-- -------------------- ---- ------- - --- -------------- -- ----- ---------------- -- ----- ---------------- - --- -------------- -- ----- ---------------- -- ----- ----------------
在这个例子中，@enyaxu/markdown-it-anchor 会自动在每个标题的左侧显示一个锚点，让用户可以通过单击锚点直接跳转到所需的部分。这样就提高了文档的可读性和可访问性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668fad9381d61a3541005