什么是 markdown-it-toc-x3？
markdown-it-toc-x3 是一款基于 markdown-it 的 TOC（目录）插件，它不仅支持默认的 TOC 生成，还支持更为灵活定制的 TOC，可以根据需求自定义 TOC 的样式、深度和内容，使用方法也非常简单方便。
如何安装和使用 markdown-it-toc-x3？
安装 markdown-it-toc-x3，可以使用 npm 或 yarn：
npm install markdown-it-toc-x3
或者：
yarn add markdown-it-toc-x3
接下来在代码中引入 markdown-it 和 markdown-it-toc-x3，然后初始化 markdown-it 实例并配置 markdown-it-toc-x3 插件：
const MarkdownIt = require('markdown-it')
const md = new MarkdownIt()
const toc = require('markdown-it-toc-x3')
md.use(toc, {
// 插件配置项
})markdown-it-toc-x3 的配置项如下：
| 选项 | 描述 | 默认值 |
|---|---|---|
| className | TOC 容器的 class 名称 | 'toc' |
| listType | TOC 列表的类型 | 'ul' |
| containerHeaderHtml | TOC 容器前面更换的 html 代码 | ' ' |
| containerFooterHtml | TOC 容器后面更换的 html 代码 | ' ' |
| containerId | TOC 容器的 id 名称 | '' |
| anchorClassName | TOC 每一项锚点的 class 名称 | '' |
| anchorLink | TOC 每一项锚点的链接图标 svg 代码 | '<svg><path></path></svg>' |
| anchorLinkSymbol | TOC 每一项锚点的链接图标框架的符号 | '#' |
| anchorLinkSpace | TOC 每一项锚点的链接图标右侧的空格数 | 2 |
| anchorSvg | TOC 中锚点图标的样式 svg 代码 | '<svg><path d="xxxx></svg>' |
| callback | 对每个生成的 TOC 链接 id 进行回调 | null |
| level | 生成 TOC 的最小和最大深度 | [1, 6] |
| format | 设置 TOC 的格式化函数，可以自定义 TOC 的链接输出效果 | null |
可以根据自己的需要对配置项进行修改，比如设置 TOC 容器的 class 名称、容器前后的 html 代码、每一项锚点的链接图标等。
这样配置后，就可以在 Markdown 中使用 [TOC] 标签来生成 TOC 了：
-- -------------------- ---- ------- - --- -- ---- -- ---- --- ----- --- ----- - --- -----
默认的 TOC 生成效果如下所示：
-- -------------------- ---- -------
---- ------------
----
------ -------------------
----
------ --------------------------
------ ---------------------
----
------ ----------------------------
------ ----------------------------
----------
----------
------ ------------------------
-----
------如果需要定制 TOC 样式，可以在 CSS 中进行修改，比如：
-- -------------------- ---- ------- ---- - -------- ----- ---------------- -------------- ---------- ----- - ----------- - ---------- ----- ------------ ----- -------------- ----- - ----------- - ------------ ----- -
总结
markdown-it-toc-x3 是一款非常实用的 Markdown TOC 插件，它支持更为灵活定制并生成 TOC，让用户能够快速方便地生成自己想要的目录结构，并为用户提供了更好的阅读体验。在实际项目中使用时，可以根据需求进行灵活调整使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f8f238a385564ab6f3d