在前端开发中，Markdown 已经成为了一种常见的文本编辑语言。依据其简洁、易读和易写的特点，Markdown 成功地被广泛应用于软件开发、文档编写等领域。然而，在撰写大量的文档时，文档的结构化和组织化是非常关键的。为了实现文档的自动化目录生成，我们可以使用 npm 包 @gerhobbelt/markdown-it-toc。
什么是 @gerhobbelt/markdown-it-toc?
@gerhobbelt/markdown-it-toc 是一个基于 markdown-it 的 Markdown 目录生成器。它可以分析你的 Markdown 文档，并自动为其生成美观、易读的目录。
安装
安装有两种方式，分别是全局安装和局部安装方式。建议使用局部安装的方式。
局部安装：
npm install @gerhobbelt/markdown-it-toc --save-dev
全局安装：
npm install -g @gerhobbelt/markdown-it-toc
使用
- 在文件头部引入模块
const MarkdownIt = require("markdown-it");
const toc = require("@gerhobbelt/markdown-it-toc");- 构造 MarkdownIt 实例，并使用插件
const md = new MarkdownIt(); md.use(toc);
- 在需要生成目录的 Markdown 文档中添加“[TOC]”占位符
-- -------------------- ---- ------- - --- --- -- --- --- -- --- --- ----- --- --- --- ---- --- --- -- --- ---
使用上述代码，你就可以在 Markdown 文档中插入占位符“[TOC]”。
在深度大于 1 的标题组成的标题列表之前，Markdown-it-toc 会自动添加标题“目录”或“目录”。
自定义
我们可以通过以下方式自定义生成的目录样式和位置：
-- -------------------- ---- -------
----------- -
--------------- ----------- ----------
---------- ---------------- --------
---------- ---------------- -------
---- -- --------------- --------
----- -- ----------------- -----------
------------- --------------- ---------------------------
--------- ------ -- -
------------
------ ----- --------------------------------------
--
---示例代码
-- -------------------- ---- -------
----- ---------- - -----------------------
----- --- - ---------------------------------------
----- -- - --- ------------
----- ----- ------------
---
----------- -
--------------- -----------
---------- ----------------
---------- ----------------
---- --
----- --
------------- ---------------
--------- ------ -- -
------ ----- --------------------------------------
--
---
----- -------- - -
- ---
---
-- ---
---
-- ---
---
-----
--- ---
---
---- ---
---
-- ---
---
--
---------------------------------小结
我们从本文中了解了如何使用 @gerhobbelt/markdown-it-toc 这个 NPM 工具包。我们可以看到，使用此包不仅可以更好地组织和展示大量的 Markdown 文档，而且还可以通过自定义它的生成规则来实现更加灵活和个性化的目录生成效果。如果你正在处理需要大量文档和中长文本的项目，这个工具会是非常有用的，它可以大大提高你的阅读和排版体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f02c870403f2923b035bd95