前言
在前端开发中，我们经常需要和 Markdown 打交道，如果需要向 Markdown 中添加代码示例，通常的方法是使用代码块（```），但是这种方式难以提供更直观的演示效果。这时候我们可以使用 codesandbox，来为项目提供在线的演示效果。
remark-codesandbox 就是一个能够将 Markdown 中的代码示例转换为 codesandbox 网站上的展示链接的 npm 包，下面是具体的使用教程。
安装
安装该包很简单，只需要在项目中安装即可：
npm install remark-codesandbox
基本使用
使用 remark-codesandbox 需要注意以下几点：
- 在代码块中添加
codesandbox的标记 - 指定 codesandbox 的信息
- 指定代码文件名
这里是一个简单的示例：
-- -------------------- ---- ------- -------------- --- ------ ---- --- -- -------- ------------ - -- -- -- -- -- --- -- -- ---- -- -- ----- -- -- ------ -- --
在这个示例中，我们使用 `codesandbox` 标记来标识这是一个 codesandbox 的示例。同时，我们在这个代码块头信息（YAML 块）中指明了这是一个 true embed 类型的示例，还需要指定 codeSandboxId，如果您没有自己的codesandbox账户，请先注册一个codesandbox帐号。并指定示例所包含的文件名。接下来，我们来一步步分析如何使用 remark-codesandbox 。
首先，引入 `remark-codesandbox`：
```js
const remark = require("remark");
const remarkCodesandbox = require("remark-codesandbox");接着，使用 remark-codesandbox 转换代码：
const content = ` example code `; const result = await remark() .use(remarkCodesandbox) .process(content);
渲染结果为：
remark-codesandbox 转换后的 Markdown 文本，本质上就是一个代码块，在 markdown-it-render 编辑器中，会直接渲染出一个代码块，在 VS Code 的 Markdown Preview Enhanced 插件中则会生成一个 iframe。在最后的提交时，remark-codesandbox 实际上会将其中的信息发送至 codesandbox 官网并生成一个对应的沙盒链接。
头信息
每个 code 块首行添加的 yaml shell 就是头信息。该头信息应包括 embed 标志（true 或 false）和可选的代码示例信息。使用 embed 来指定是否要把代码沙盒嵌入到文档中，当 embed 为 true 时，remark-codesandbox 会将代码块转为一个 iframe，否则 remark-codesandbox 会在源代码上方渲染当前链接。同时，可以根据自己的需求添加其他的信息，例如中文描述，代码作者等。
在下面的示例中，我们添加了 codeSandboxId、file 和 title 的头信息：
-- -------------------- ---- ------- -------------- --- ------ ---- ------ -- -------------- ------ ----- ------- ------------ ------ ------- ---- --- ------------------ --------
-- -------------------- ---- ------- ---- ----- ------------- - -------- ----------- ------ - -------- - -------- ----- - ---------------- ----------- - --- --- - ------- ------ - -------------- -------- - --------- --- -- ---- ------- ------------------ ---------------------- ----------- - -------- --- ----------- -------------------- ---------------- -------- -------- ----------- --------------- --------------------------------------- --- -------------- --- ------ ---- ------ - -------- --- ----------- -------------- --------- ----- ------- ------------ -- ------------------ ------- ----------- ---- --- ------------------ ---------------------
效果：
==embedded-codesandbox-y5r6wbypv==
在代码块头信息中使用 embed: true 可以使代码块生成嵌入式示例链接。这里我们指定了标题、代码示例信息、代码 Sandbox ID、文件名及描述。通过赋予每个代码块不同的代码Sandbox ID，可以同时嵌入多个不同的示例。
结论
使用 remark-codesandbox 可以让我们更加方便快捷地将代码示例转换为 codesandbox 演示链接，并将其嵌入到文档中。这样做既能提高开发效率，同时还能让读者更加清楚地看到我们要说明的内容。在今后的应用中，我们可以根据实际需要继续发挥 remark-codesandbox 的功能，为我们的项目注入更多的灵活性和实用性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f2436a23b0ab45f74a8b8ea