在前端开发中,我们常常需要使用 Markdown 进行文档编写。而 Markdown 的一个重要特性就是目录(Table of Contents)功能,可以为文档增加导航和结构化。
markdown-it-toc
是一个用于生成 Markdown 目录的 npm 包,它通过解析 Markdown 标题来自动生成目录,并支持自定义选项进行配置。下面将详细介绍如何安装和使用 markdown-it-toc
。
安装
首先,我们需要在项目中安装 markdown-it
和 markdown-it-toc
两个包。可以使用以下命令进行安装:
--- ------- ---------- ----------- ---------------
使用
下面是一个示例 Markdown 文档:
- --- -- ----- --- --- -- -----
我们可以使用以下代码生成该文档的目录:
----- -- - ------------------------- ----- --- - --------------------------- ------------ ----- ------ - ------------ --------- ------------ --------- -------- --------------------
输出结果如下:
---- -------------------------- ---- ------ ------------------- ---- ------ ---------------------- ---- ------ ------------------- ----- ----- ----- ------ ---------------------- ----- ----- ----- ----- ------ --- ----------------- --- -------------------- --- ----------------- --- --------------------
可以看到,生成的目录以 HTML 的形式在文档开头插入,并且每个标题都添加了相应的锚点。默认情况下,markdown-it-toc
会为所有标题生成目录。但是我们也可以使用选项来自定义生成内容。
选项
下面是 markdown-it-toc
支持的选项及其默认值:
- ------------- --- -- -- -- -- --- -- --------- --------------- -------------------- -- ----- ----- -- --------- ----- -- ------- - --- ------- --------- -- -------------------- -- --------- ------------- ------ -- ---------- -
我们可以通过将选项对象传递给 markdown-it-toc
来进行自定义配置,例如:
----------- - ------------- --- --- -- --------- --------------- ------ -- --- ----- ---- --- --------- ----- -- ---------- ---
这里我们只包含了二、三级标题,容器的 class 名称改为 toc
,列表类型改为有序列表。生成的目录如下:
--- ------------ ------ ----------------------- ---- ------ ------------------------ ----- ----- ------ ---------------------------- ----- --- ----------------- --- --------------------- --- ----------------- --- ---------------------
结
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/43343