随着 JavaScript 生态系统的不断发展，前端开发变得越来越便利。通过 npm 安装各种包，可以极大地提高开发效率。在这篇文章中，我们将介绍 @gerhobbelt/markdown-it-anchor 这个 npm 包的使用教程。
简介
@gerhobbelt/markdown-it-anchor 是一个基于 markdown-it 的插件，它可以为 markdown 文档中的标题添加锚点，使得可以通过点击标题跳转到相应的内容位置。此外，它还支持自定义锚点链接的前缀和后缀，让你可以更好地根据项目需求进行定制。
安装
@gerhobbelt/markdown-it-anchor 可以通过 npm 进行安装。在终端中运行以下命令即可：
npm install @gerhobbelt/markdown-it-anchor --save-dev
这里我们使用 --save-dev 参数将包安装到了开发环境中。如果你需要在生产环境中使用该包，请省略该参数。
注意，使用 @gerhobbelt/markdown-it-anchor 前，需要先使用 markdown-it 进行 markdown 解析。如果您还没有安装 markdown-it，可以通过以下命令进行安装：
npm install markdown-it --save-dev
使用
安装完包之后，我们需要在项目中引入 @gerhobbelt/markdown-it-anchor：
const MarkdownIt = require('markdown-it');
const md = new MarkdownIt();
const anchor = require('@gerhobbelt/markdown-it-anchor');
md.use(anchor);这个时候，我们已经添加了 @gerhobbelt/markdown-it-anchor 插件，并让 markdown-it 使用了它。现在您可以使用 markdown-it 对 markdown 文档进行解析，插件会自动为标题添加锚点。
自定义链接
默认情况下，插件为标题添加的锚点链接类似于以下字符串：
<a href="#my-header">#</a>
如果您希望自定义锚点链接的前缀和后缀，可以通过配置 options 来设置。
md.use(anchor, {
permalink: true,
permalinkSymbol: '🔗'
});这里我们将 permalink 设为 true，表示开启自定义链接选项。同时，我们将 permalinkSymbol 设为了 '🔗'，即在锚点链接前添加了一个符号。
这样，生成的锚点链接就会变成：
<a href="#my-header">🔗</a>
示例代码
下面是一个完整的示例代码，在解析 markdown 文档时会为标题添加自定义的锚点链接。
-- -------------------- ---- ------- ----- ---------- - ----------------------- ----- -- - --- ------------- ----- ------ - ------------------------------------------ -------------- - ---------- ----- ---------------- ---- --- ----- ----- - -- ----------- ----- ------ - ----------------- -------------------- -- --- ----------------- --------------------------------------
总结
@gerhobbelt/markdown-it-anchor 为我们提供了一个简单的方式，在 markdown 文档中添加锚点链接。通过自定义选项，我们可以轻松地控制链接的前缀和后缀。希望这篇文章对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f02c870403f2923b035bd72