前言
在前端开发中，我们经常需要对文本进行一些处理，其中对于 Markdown 文档的操作比较常见。在 Markdown 中，有一种列表的语法，可以用于展示一些有序或无序的信息。但有时候我们需要对列表进行更加细致的处理，比如对每一个列表项进行序号的添加或者对无序列表样式的调整等等。
在这种需求下就出现了一个非常好用的 npm 包 mdast-add-list-metadata，它提供了一系列 API，可以对 Markdown 中的列表进行精细化的处理。
安装与使用
安装 mdast-add-list-metadata 只需要在命令行中输入：
--- ------- -----------------------
安装完成后，在需要使用这个 npm 包的项目中引入它即可，例如：
----- --------------- - ----------------------------------
接下来，我们就可以使用它提供的 API 进行列表的定制化处理了。
API 操作
addListMetadata(tree[, options])
这个方法用于对一棵 MDAST 树 中的列表节点进行处理。
----- ------- - --------------------- --------
其中 tree 表示传入的 MDAST 树，options 是一个对象，它包含了一些扩展参数，这里列举一下主要参数：
bullet：在无序列表中使用的标记，默认为-；start：在有序列表中第一项的编号，默认为1；loose：指定松散列表的处理方式，默认为false
根据不同情况，我们可以使用不同的参数来进行列表操作。
下面是一个简单的操作示例：
----- ------ - ----------------- ----- --------------- - ---------------------------------- ----- ------ - ----------------- ----- --------------- - - - ---- - - ---- - - ----- ---- - ----------------------------- --------------------- ----- ----------------------- - ---------------------- ------------------------------------------- - - ---- - - ---- - --
在这个例子中，我们将一个无序列表传入到 mdast-add-list-metadata 包中，然后它进行了处理，最后我们将修改后的内容输出，可以发现没有任何变化。说明默认情况下，mdast-add-list-metadata 并不改变列表的内容。
那么这个包到底能够实现什么功能呢？
mdast-add-list-metadata 包的主要功能
经过实测发现，mdast-add-list-metadata 主要可以实现以下几个功能：
- 为每一个列表项加上
index属性，包含当前项在列表中的编号； - 为每一个列表项加上
parentIndex属性，包含当前项的父级编号，使用空格分隔； - 对无序列表进行样式的调整；
- 对有序列表的起始数字进行处理。
通过使用不同的参数，我们可以控制这些功能的开关。
下面是一些操作的示例：
对每个列表项进行编号
----- ------ - ----------------- ----- --------------- - ---------------------------------- ----- ------ - ----------------- ----- --------------- - - - ---- - - ---- - - ----- ---- - ----------------------------- --------------------- - ------ ---- -- ----- ----------------------- - ---------------------- ------------------------------------------- - - ---- ---------- - ---- ---------- --
在这个示例中，我们将 index 参数设置为 true，然后输出的结果中可以看到，每一个列表项都增加了一个 {index} 属性，并且包含了它在列表中的编号。
对每个列表项添加父级编号
----- ------ - ----------------- ----- --------------- - ---------------------------------- ----- ------ - ----------------- ----- --------------- - - - ---- - - ---- --- - ---- --- - ---- - - ----- ---- - ----------------------------- --------------------- - ------------ ---- -- ----- ----------------------- - ---------------------- ------------------------------------------- - - ---- ---------- - ---- -------------- -------------- - ---- -------------- -------------- - ---- ---------- --
这个示例中，我们对每一个列表项都添加了一个 {parentIndex} 属性，并且用空格隔开了它的父级编号。一个列表项的父级编号由它前面所有层级的编号组合而成，例如 1.2 表示这个项处于第一级列表的第 1 项，第二级列表的第 2 项。
调整无序列表样式
----- ------ - ----------------- ----- --------------- - ---------------------------------- ----- ------ - ----------------- ----- --------------- - - - ---- - - ---- - - ----- ---- - ----------------------------- --------------------- - ------- --- -- ----- ----------------------- - ---------------------- ------------------------------------------- - - ---- ---------- - ---- ---------- --
对于无序列表，我们可以通过 {bullet} 参数来改变列表项的样式，例如将原来的 - 改成 +。
调整有序列表的起始数字
----- ------ - ----------------- ----- --------------- - ---------------------------------- ----- ------ - ----------------- ----- --------------- - - -- ---- - -- ---- - - ----- ---- - ----------------------------- --------------------- - ------ --- -- ----- ----------------------- - ---------------------- ------------------------------------------- - ---- ---- ------------ ---- ---- ------------ --
对于有序列表，我们可以通过 {start} 参数来控制数字起始位置。
总结
通过学习 mdast-add-list-metadata 这个 npm 包的使用，我们可以更加方便地对 Markdown 中的列表进行定制化处理。实际上，它内部应用了非常优秀的 MDAST 技术栈，能够对任意复杂的列表结构进行处理。在实际使用中，我们可以根据不同的需求选择合适的参数，来满足我们的业务需求。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedcc3eb5cbfe1ea0612713