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