在前端开发中，我们常常需要为我们的一篇文章或页面添加目录，方便读者查看和阅读。针对这个需求，@gerhobbelt 开发了一个 npm 包 @gerhobbelt/markdown-it-table-of-contents，本文将介绍该 npm 包的使用教程。
安装
使用该 npm 包之前，我们需要先在我们的项目中安装它。可以通过 npm 命令进行安装：
--- ------- ----------------------------------------- ------
注意：该包需要我们已经安装了 markdown-it 包。
使用
在我们的 markdown 文档中，我们需要为文章添加一个自动生成的目录。使用 @gerhobbelt/markdown-it-table-of-contents 我们只需要在文章中添加以下代码：
--- ---
这个标记表示根据文章中的标题自动生成目录。通过安装并配置该包，我们可以实现这个目录。
首先，我们需要在我们的代码中引入 markdown-it 和 @gerhobbelt/markdown-it-table-of-contents。可以使用以下代码引入：
----- -- - ------------------------
----- --- - ----------------------------------------------------
----------- -
-- ------- --
--使用以上代码载入了我们需要的 npm 包。
接下来，我们需要将我们的 markdown 文本转换为 HTML 代码。使用 markdown-it 的 render 方法可以实现这个转换：
----- ------ - -----------------------
这个结果就是我们渲染出来的 HTML 内容，包括了我们生成的目录。以上代码即为使用该 npm 包的完整流程。
使用选项
在使用该包时，我们还可以通过传递不同的选项以实现不同的效果。下面是一些可用的选项：
tocClassName: 目录的 class 名称。默认是 "table-of-contents"。tocFirstLevel: 最高层级标题的索引。默认是 2。tocLastLevel: 最低层级标题的索引。默认是 6。tocId: 目录的 id。默认是 ""。tocWrapper: 包裹目录的 HTML tag 名称。默认是 "div"。anchorClassName: 锚点的 class 名称。默认是 "anchor"。anchorLinkSymbol: 锚点的链接符号。默认是 "#"。anchorLinkSpace: 锚点链接符的两边是否需要加入空格。默认是 false。
示例代码
以下是一个示例代码，展示了如何使用该 npm 包。该代码将 markdown 文档中的文本转换为 HTML 并且将生成的目录插入到该 HTML 中。
----- -- - ------------------------
----- --- - ----------------------------------------------------
----------- -
------------- -----------------------
-------------- --
------------- --
------ -----------------------
----------- ----------
---------------- ------------
----------------- ----
---------------- -----
--
----- ------------ - -- -----
--- ---
-- ------- -
--- ---------- -
--- ---------- -
-- ------- -
--- ---------- -
----
----- ------ - -----------------------
-------------------以上代码输出的结果如下：
--------------
-------- ------------------------- -----------------------------
----
------ ------------------------- -----
----
------ ------------------------------- ----------
------ ------------------------------- ----------
-----
-----
------ ------------------------- -----
----
------ --------------------------------- ----------
-----
-----
-----
----------
--- ---------------------- ------
--- ---------------------------- ------
--- ---------------------------- ------
--- ---------------------- ------
--- ------------------------------ ------以上是使用 @gerhobbelt/markdown-it-table-of-contents 的具体使用方法和示例，不难发现该 npm 包让我们的 markdown 文章目录展示变得简单易行，是一个很好的实用工具。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5f02c870403f2923b035bd92