在前端开发中，制作文档是一个必要且常见的工作。而对于大型项目来说，文档可能会变得比较复杂，需要一些工具来帮助我们更好地管理文档。此时，marked-toc 就是一个不错的选择。
简介
marked-toc 是一个基于 marked 的 Markdown 目录生成器。它可以自动解析 Markdown 文件中的标题（H1-H6），并按照层级关系生成目录结构。同时，marked-toc 还支持自定义渲染模板和样式，可以满足不同的需求。
安装
使用 npm 安装 marked-toc：
npm install --save marked marked-toc
使用方法
生成目录
marked-toc 提供了两种方式生成目录：命令行和 JavaScript API。
命令行
通过命令行生成目录非常简单：
npx marked-toc [filename]
其中，filename 表示要生成目录的 Markdown 文件名。执行命令后，marked-toc 会在控制台输出生成的目录。
JavaScript API
如果想要在代码中使用 marked-toc，可以使用以下方式：
-- -------------------- ---- ------- ----- -- - -------------- ----- ------ - ------------------ ----- --- - ---------------------- ----- ----------- - ------------------------------ --------- ----- -------- - --------------------- ------------ -------- --- ----- ----------- - -------------------- ----- ---------- - -------------展开代码
其中，filename 表示要生成目录的 Markdown 文件名。通过 fs 模块读取文件内容后，创建一个自定义的渲染器，并将其传递给 marked 的 use 方法。接着，使用 marked 将 Markdown 转换成 HTML，并从渲染器中获取生成的目录。
自定义样式
默认情况下，marked-toc 生成的目录样式比较简单，不太美观。如果想要修改样式，可以通过以下方式实现。
CSS 样式
可以直接在 HTML 中添加 CSS 样式：
-- -------------------- ---- ------- ------- ---- - ------- --- ----- ----- -------- ----- - ------- - ---------- ----- ------------ ----- ----------- ----- - ------- - ---------- ----- ------------ ----- ------------ ----- ----------- ----- - ------- - ---------- ----- ------------ ----- ------------ ----- ----------- ----- - --------展开代码
其中，#toc 是整个目录的容器，.toc-h1、.toc-h2、.toc-h3 分别表示一级标题、二级标题、三级标题的样式。
自定义模板
也可以通过自定义模板的方式修改样式。首先，创建一个 HTML 模板文件，其中用 {{toc}} 表示目录所在位置：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ----------------------- ------- -- -- -- -------- ------- ------ ---- ---------------------- ------- -------展开代码
接着，在代码中使用以下方式生成目录：
-- -------------------- ---- ------- ----- -- - -------------- ----- ------ - ------------------ ----- --- - ---------------------- ----- ----------- - ------------------------------ --------- ----- -------- - -------------------- --------- -------------------------------- -------- --- ------------ -------- --- ----- ----------- - --------------------展开代码
其中，template 属性指定了模板文件的路径。marked-toc 会将生成的目录
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/41998
