概述
Markdown 是一种轻量级标记语言，很方便的为文本添加样式和结构。然而 Markdown 本身缺少对自定义的段落类型的支持。为了弥补这一缺陷，有一种灵活的解决方案是使用 remark-containers npm 包。
remark-containers 是一个使用 remark 的插件，它提供了创建自定义 Markdown 代码块的能力。使用这个插件可以更方便地为一些定义好的块添加附加的样式、语义信息和其它特定的配置。
本文将向您介绍如何安装和使用 remark-containers npm 包。
安装
remark-containers 是一个基于 npm 的插件，安装它需要先确保您已经安装了 npm。在您的项目目录下打开终端并输入以下命令安装 remark 和 remark-containers：
--- ------- ------ -----------------
使用
完成安装后，在项目中的 markdown 文件中添加您希望使用的自定义容器。容器由名称和从两个冒号 :: 包围的一组括号组成，如下所示：
--- ---- ------- ---
在上面的例子中，名称为 "info" 的自定义容器将被创建，并将 "这是一个提示框" 作为容器的内容。
配置
您还可以配置自己的容器。更改可以应用于整个容器或特定的语言。
更改容器本身
您可以直接修改容器的样式：
--- ------------- -------------- ---
在这个例子中，我们添加了一个 bg-green 类名，它将为我们的容器添加一个绿色背景。
我们还可以通过在容器名称后增加内容字符串来为自定义容器提供任何选项：
--- ---------------------- ------------------- -------- ---
在上述示例中，代码块容器现在附带一个名为 lineNumbers 的选项，其值为 true，在渲染代码块时将为其添加行号。
更改语言本身
您可以更改容器内容的语言，例如，将代码块的语言从默认的 JavaScript 更改为 TypeScript：
--- -------------------- ----- ---------- ------ ---
在这个例子中，我们把容器的语言选项修改为 TypeScript。remark-containers 将自动在代码块周围添加正确的语言标记（例如，<pre class="language-typescript">）以便于渲染器识别。
示例代码
让我们看一个实际的例子。考虑以下内容：
--- ---- - ----- --------------------------------------- ----- ------------------- ---------
:::
--------------------- --------------------
----------- ------ - ----------------- ----- -----
-----
----- ------- - -------------------
----- -------- - ------------------------
----- ---------- - -----------------------------
----- ---- - -----------------------
----- -- - -
--- ----
- -----
---------------------------------------
--------
------------------- ---------
------
---
--
---------
--------------
----------------
----------
------------ ------------- ----- -
--------------------------
---在这个例子中，我们使用 unified 所提供的插件处理框架来创建解析和渲染管道。每个插件都是使用 use() 方法链接的，并按顺序处理传递过来的内容。最终，我们将渲染出一个 HTML 片段，其中包含 CSS 类名为 card 的卡片。
结论
remark-containers npm 包是一个非常有用的扩展 Markdown 语法的方法，使用它可以方便地为自定义的内容添加语义信息、样式信息和其它配置项。在合适的情况下，它可以大大提高文档的清晰度和可读性。
在您的项目中使用 remark-containers 进行 Markdown 渲染之前，最好先掌握它的知识，以便正确地使用并利用它所提供的附加功能。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5f0588bb403f2923b035bef3