介绍
markdown-it-anchor 是一个在 Markdown 中生成锚点的 npm 包。它可以非常方便地为 Markdown 文本生成唯一 ID 的标题，并自动在内容中创建链接。
在前端开发中，我们经常需要在文档中添加跳转链接以提高用户体验和文档可读性。 markdown-it-anchor 可以帮助我们快速完成这个任务而无需手动编写 HTML。
安装
使用 npm 安装 markdown-it-anchor：
npm install --save markdown-it-anchor
安装后，可以将其导入项目中：
const markdownIt = require('markdown-it'); const markdownItAnchor = require('markdown-it-anchor');
用法
使用 markdown-it-anchor 非常简单。只需在实例化 Markdown 渲染器时传递配置对象即可：
const md = markdownIt() .use(markdownItAnchor, { // anchor配置 });
配置选项
以下是常见配置选项及其含义：
level: 数字或数字数组，标题级别的限制，默认为[1, 2, 3, 4, 5, 6]。permalink: 布尔值，表示是否显示永久链接，默认为false。permalinkClass: 字符串，永久链接的 CSS 类名，默认为'header-anchor'。permalinkSymbol: 字符串，永久链接的标志符号，默认为¶。permalinkBefore: 布尔值，表示永久链接是否显示在标题文本之前，默认为false。permalinkSpace: 字符串，标题文本和永久链接之间的空格，默认为' 'slugify: 函数，用于将标题转换为唯一ID，默认使用anchorJS.mangle函数。
示例
以下是一个使用示例：
-- -------------------- ---- ------- ----- -- - ------------ ---------------------- - ------ --- --- ---------- ----- --------------- --------------- ---------------- ---- ---------------- ----- -------- -------- --- - ------ ------------------------------ - --- ----- ------ - ------------ ----- -------- --------------------展开代码
在上面的代码中，我们使用了以下配置选项：
- 仅生成级别为 1 和 2 的标题的锚点；
- 在标题文本前显示永久链接，并使用自定义 CSS 类名和标记符号
#； - 使用自定义函数将标题转换为ID。
输出结果如下所示：
<h1 id="hello-world" class="custom-class header-anchor"> <a href="#hello-world">#</a> hello world </h1>
总结
markdown-it-anchor 是一个方便快捷的 npm 包，可以帮助我们在 Markdown 中快速生成唯一 ID 的标题。它提供了许多有用的配置选项，可以满足不同的需求。通过使用 markdown-it-anchor，我们可以更加高效地编写文档，并提高文档的可读性和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/47654
