如果你是一位前端开发者，你肯定知道 markdown 是一种编写文档的纯文本标记语言，非常适合写技术文档或者博客。但是，在编写大型文档或者网站时，经常需要生成文档目录和文章内部链接，这时候就需要使用著名的 npm 包 @gerhobbelt/markdown-it-toc-and-anchor。它可以在 markdown 中自动生成标题锚点和文档目录，大大提高了文章可读性和阅读体验。
安装
你需要使用 npm 或者 yarn 进行安装，执行以下命令即可：
npm install @gerhobbelt/markdown-it-toc-and-anchor
or
yarn add @gerhobbelt/markdown-it-toc-and-anchor
使用
在你的项目中，你需要引入插件并对其进行配置。下面是一个简单的例子：
const MarkdownIt = require('markdown-it');
const toc = require('@gerhobbelt/markdown-it-toc-and-anchor').default;
const md = new MarkdownIt();
md.use(toc, {
// 个性化的配置选项
});这样就可以在 markdown 中使用 [toc] 来自动生成目录，使用 [#xxx](#xxx) 来链接到对应的标题。
深度学习
@gerhobbelt/markdown-it-toc-and-anchor 支持的自定义选项非常丰富，你可以非常灵活的根据自己的需要进行个性化定制。下面是一些常用的自定义选项：
tocFirstLevel
设置目录从指定级别开始。默认从一级标题开始。
md.use(toc, {
tocFirstLevel: 2, // 从第二级标题开始
});tocLastLevel
设置目录到指定级别结束。默认到三级标题结束。
md.use(toc, {
tocLastLevel: 4, // 到四级标题结束
});anchorClassName
设置锚点的类名。
md.use(toc, {
anchorClassName: 'anchor',
});anchorLinkSymbol
设置锚点链接的符号。
md.use(toc, {
anchorLinkSymbol: ' 🔗',
});anchorLinkPrefix
设置锚点链接的前缀。
md.use(toc, {
anchorLinkPrefix: 'link-',
});anchorLinkBefore
设置锚点链接在标题前或者后。
md.use(toc, {
anchorLinkBefore: false, // 锚点链接在标题后
});anchorLinkSpace
设置锚点链接前面的空格数量。
md.use(toc, {
anchorLinkSpace: 2, // 2 个空格
});anchorLinkAriaLabel
设置锚点链接的 ARIA 标签。
md.use(toc, {
anchorLinkAriaLabel: '目录',
});示例代码
下面是一个完整的示例代码，其中包含上述所有自定义选项：
-- -------------------- ---- ------- ----- ---------- - ----------------------- ----- --- - ---------------------------------------------------------- ----- -- - --- ------------ ----- ----- -------- ----- ------------ ----- --- ----------- - -------------- -- ------------- -- ---------------- --------- ----------------- ----------- ----------------- -------- ----------------- ------ ---------------- -- -------------------- ----- --- ----- ------ - ----------- - --- ------ -- --- ------ --- --- ------ ---- --- ------ --- --------------------
输出结果为：
-- -------------------- ---- -------
--- -----------------
-------------
--- ----------- --------------- -------------- ---------------- -------------------------- --------
-------------
--- ----------- --------------- -------------- ---------------- -------------------------------- --------
-------------
--- ----------- --------------- -------------- ---------------- -------------------------------------------- --------
-------------
---- --------------------------
----
------ -------------------
----
------ -------------------
----
------ ------------------------
-----
-----
-----
-----
-----
------可以看到，@gerhobbelt/markdown-it-toc-and-anchor 插件生成了文章标题锚点和目录，并且通过自定义选项实现了个性化定制，提升了文章的阅读体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f02c870403f2923b035bd96