随着前端技术日益发展，我们的很多开发工作都需要用到各种各样的工具和库来提高开发效率和代码质量。其中，npm 是前端开发中最常用的包管理工具之一。
在这篇文章中，我们将介绍一个非常实用的 npm 包 @more-markdown/code-controls，它可以为我们的 Markdown 文档提供代码控制功能，帮助我们更好地展示和管理代码片段。
什么是 @more-markdown/code-controls
@more-markdown/code-controls 是一个为 Markdown 文档提供代码控制的 npm 包。它可以在 Markdown 文档中为代码块添加一些控制按钮，从而实现代码的折叠、展开、复制等功能。使用这个包可以让我们在 Markdown 文档中更好地展示代码，使得文档更加清晰易读。
如何使用 @more-markdown/code-controls
使用 @more-markdown/code-controls 很简单。我们只需要在项目中安装并引入它，就可以在 Markdown 文档中使用了。
安装 @more-markdown/code-controls
在终端中运行以下命令来安装 @more-markdown/code-controls：
npm i @more-markdown/code-controls
引入 @more-markdown/code-controls
在你的 Markdown 文档中，你需要添加如下代码来引入 @more-markdown/code-controls：
-- -------------------- ---- -------
---- ------- --- -- ---
----- ---------------- -------------------------------------------------------------------- --
---- ------- -- -- ---
------- ----------------------------------------------------------------------------
---- --------- ---
--------
-------------------
-- ---
---
---------使用 @more-markdown/code-controls
在你的 Markdown 文档中，你需要为需要控制的代码块添加如下 HTML 标签：
-- -------------------- ---- ------- ---- ------- --- ---------- ----------------------------- ---------- -- -------------- ---- ---- --- ---- ----------------------------- ---- -------------------------- --------------------------- ---- -------------------------- ----------------------------- ---- -------------------------- ------------------------------- ------
其中，data-action 属性用来定义按钮的操作类型。具体操作类型和作用如下：
copy：复制代码expand：展开代码collapse：折叠代码
需要注意的是，data-action 的值必须是上述三个中的一个，否则按钮不会生效。
接下来，你可以根据具体需求配置插件的参数，例如设置按钮的颜色、大小等。
示例代码
下面是一个使用 @more-markdown/code-controls 的示例：
-- -------------------- ---- -------
---- ------- --- -- ---
----- ---------------- -------------------------------------------------------------------- --
---- ------- -- -- ---
------- ----------------------------------------------------------------------------
---- --------- ---
--------
-------------------
-- ---
---
---------
---- ---- ---
---------- ----------------------------
-------- ------------ -
------------------- ---------
-
-------------
-------------
---- ---- ---
---- -----------------------------
---- -------------------------- ---------------------------
---- -------------------------- -----------------------------
---- -------------------------- -------------------------------
------总结
使用 @more-markdown/code-controls 可以为我们的 Markdown 文档提供代码控制功能，从而更好地展示代码。在使用过程中，我们需要安装、引入和配置这个包，然后为需要控制的代码块添加相应的 HTML 标签。希望这篇文章对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcc967216659e244838