npm 包 markdown-it-class-plus-lists 使用教程

Markdown 是一种用来书写简单易懂文档的语言。由于 Markdown 的便利，许多开发者把它作为日常写作的主要工具，并且在网站的渲染端也常常使用 Markdown 进行文本的渲染。而 markdown-it-class-plus-lists 这个 npm 包便是在 Markdown 语言的基础上做了扩展，使得我们可以更好地控制文档渲染的样式。

这篇文章将会帮助到你去了解 markdown-it-class-plus-lists，学习如何使用它，以及如何为你的文档添加更多的样式。

初步认识 markdown-it-class-plus-lists

markdown-it-class-plus-lists 是一个可以将 Markdown 列表添加 CSS 类的插件。通过在 Markdown 列表中添加指定格式的文本，我们能够让我们的内容更加富有活力和易于阅读。

安装

在开始使用 markdown-it-class-plus-lists 之前，你需要先安装 markdown-it 和 markdown-it-class-plus-lists 这两个 npm 包。在项目根目录输入以下命令即可进行安装：

npm install markdown-it markdown-it-class-plus-lists --save

使用教程

markdown-it-class-plus-lists 的使用还是相对简单的。你只需要将 markdown-it-class-plus-lists 的模块引入到你的脚本里，然后通过调用 list 插件进行实例化。

const md = require('markdown-it')();
const classLists = require('markdown-it-class-plus-lists');

md.use(classLists, [
    //配置项
]);

如上所示，我们通过 require 导入了 markdown-it 和 markdown-it-class-plus-lists 两个模块，然后通过调用 list 插件进行实例化，并进行了一些简单的配置。

配置列表

configuration对象是一个属性名称和值的对象。每个键表示一个列表类型（如"ordered", "unordered"），而每个值都是这个配置类型的配置项。你可以在对象内部嵌套多个对象来设置多个属性。

markdown-it-class-plus-lists 提供了多种不同的配置项，你可以通过配置来为你的列表添加不同的 CSS 类：

• listItemClass：单个列表项的 CSS 类；
• listClass：整个列表的 CSS 类；
• listItemSuffix：CSS 类的后缀名称，例如：list-item-custom；
• ulClass：无序列表的 CSS 类；
• olClass：有序列表的 CSS 类；
• dlClass：描述列表的 CSS 类。

以下是一些常规的配置项，你可以在你的代码中使用它们：

md.use(classLists, {
    listClass: 'customList',
    listItemClass: 'item',
    listItemSuffix: '-item',
    ulClass: 'customUl',
    olClass: 'customOl',
    dlClass: 'customDl'
});

通过使用这些配置项，你可以为你的列表添加多个自定义的 CSS 类。这样做可以让你更好地控制文档的样式。例如，你可以为有序列表和无序列表添加专门的背景色和字体样式，以便读者更容易加深对列表项的印象。

代码演示

下面我们将为你提供一些示例代码来帮助你更好地理解 markdown-it-class-plus-lists 的使用。

无序列表

- item one
- item two 
- item three

md.use(classLists, {
    listItemClass: 'custom-li',
    ulClass: 'custom-ul'
});

生成的 HTML 代码：

<ul class="custom-ul">
    <li class="custom-li">item one</li>
    <li class="custom-li">item two</li>
    <li class="custom-li">item three</li>
</ul>

有序列表

1. item one
2. item two 
3. item three

md.use(classLists, {
    listItemClass: 'custom-li',
    olClass: 'custom-ol'
});

生成的 HTML 代码：

<ol class="custom-ol">
    <li class="custom-li">item one</li>
    <li class="custom-li">item two</li>
    <li class="custom-li">item three</li>
</ol>

描述列表

term1
: definition1
term2
: definition2

md.use(classLists, {
    listItemClass: 'custom-li',
    dlClass: 'custom-dl'
});

生成的 HTML 代码：

<dl class="custom-dl">
    <dt class="custom-li">term1</dt>
    <dd>definition1</dd>
    <dt class="custom-li">term2</dt>
    <dd>definition2</dd>
</dl>

总结

markdown-it-class-plus-lists 是一个十分实用的 npm 包，它可以让你更好地控制文档的样式。通过阅读本文，你应该可以对它的基础使用和一些基本配置选项有了充分的了解。在实际应用中，你可以灵活运用它为你的文档添加更多的自定义 CSS 类，实现更加卓越的渲染效果。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fc781e8991b448dd3cb