本文介绍如何使用 npm 包 remark-bracketed-spans. 如果您不熟悉 npm，请先阅读 npm 使用指南.
remark-bracketed-spans 是一个用于 remark 的插件，它会解析 Markdown 文档中带括号的标记，并将其转换为 HTML span 元素。
比如，我们可以将下面的 Markdown 代码：
这是一个示例，(注释)这是括号内容，另一个示例(同样是注释)。
转换为 HTML 代码：
<p>这是一个示例，<span class="bracketed-span">注释</span>这是括号内容，另一个示例<span class="bracketed-span">同样是注释</span>。</p>
这个插件并不是很流行，但它是一个非常好的示例用于学习 remark 插件的编写和使用。本文将详细介绍如何在项目中使用它，并提供一些示例代码。
安装
首先需要在项目中安装 remark 和 remark-bracketed-spans:
npm install remark remark-bracketed-spans
提示：如果使用
yarn而非npm，则可以使用yarn add remark remark-bracketed-spans来完成安装。
使用
接下来，我们需要创建一个 JavaScript 文件来使用这个插件。在这个文件中，我们将使用 remark 来解析 Markdown 和 remark-bracketed-spans 插件来转换带括号的内容。
-- -------------------- ---- -------
----- ------ - ------------------
----- -------------- - ----------------------------------
----- -------- - ----------------------------------
--------
--------------------
------------------ ----- ----- -- -
-- ----- ----- ---
-------------------------
---在上面的代码中，我们首先将要解析的 Markdown 代码存储在markdown 变量中。然后，在 remark 实例中使用 .use() 方法来添加我们的插件 bracketedSpans。最后，我们通过调用 .process() 方法来解析 Markdown 文本，并在回调函数中输出 HTML 代码。
运行上面的代码，我们可以得到以下输出：
<p>这是一个示例，<span class="bracketed-span">注释</span>这是括号内容，另一个示例<span class="bracketed-span">同样是注释</span>。</p>
提示：如果您想将此代码嵌入到您的项目中，则应该将其放在合适的位置并进行必要的调整。您也可以将其作为一个 npm 包来分享和重用。
自定义 class 名称
默认情况下，插件将使用 bracketed-span 作为 HTML 元素的类名。如果需要使用不同的类名，则可以通过传递 className 选项来覆盖默认值。下面是一个示例：
-- -------------------- ---- -------
----- ------ - ------------------
----- -------------- - ----------------------------------
----- -------- - ----------------------------------
--------
-------------------- - ---------- ----------- --
------------------ ----- ----- -- -
-- ----- ----- ---
-------------------------
---在上面的代码中，我们将 className 选项设置为 highlight。运行输出与之前的输出类似，只是 span 元素的 class 属性被设置为 highlight。
<p>这是一个示例，<span class="highlight">注释</span>这是括号内容，另一个示例<span class="highlight">同样是注释</span>。</p>
支持嵌套括号
默认情况下，remark-bracketed-spans 不支持嵌套括号。如果 Markdown 中存在嵌套的括号，则只有外层的括号才会被转换为一个 span 元素。
例如，考虑以下 Markdown 代码：
这是一个示例，(注释(嵌套))这是括号内容，((另一个示例))。
默认情况下，插件只转换外部的括号。此时，输出的 HTML 代码如下：
<p>这是一个示例，<span class="bracketed-span">注释(嵌套)</span>这是括号内容，((另一个示例))。</p>
但是，我们可以通过传递 nestedBrackets: true 选项来支持嵌套的括号。下面是一个示例代码：
-- -------------------- ---- -------
----- ------ - ------------------
----- -------------- - ----------------------------------
----- -------- - -----------------------------------
--------
-------------------- - --------------- ---- --
------------------ ----- ----- -- -
-- ----- ----- ---
-------------------------
---在上述代码中，我们将 nestedBrackets 选项设置为 true。这将会使插件支持嵌套的括号。运行输出与之前的输出类似，只是嵌套的括号也被转换为了 span 元素。
<p>这是一个示例，<span class="bracketed-span">注释<span class="bracketed-span">嵌套</span></span>这是括号内容，<span class="bracketed-span">(另一个示例)</span>。</p>
结论
remark-bracketed-spans 是一个很简单但非常有用的插件，有助于您更好地理解 remark 插件的编写和使用。在本文中，我们介绍了如何在项目中使用它，并探索了几个可用的选项。希望您现在已经了解了如何使用这个插件，也希望它对您编写自己的 remark 插件有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600554ea81e8991b448d21f4