npm包markdown-it-codesandbox使用教程

什么是markdown-it-codesandbox?

markdown-it-codesandbox 是一个 markdown-it插件，用于将示例代码块转换为SandBox，方便快速地测试代码并查看效果。通过使用这个插件，读者不仅可以更好地理解技术文章中的示例代码，还可以直接运行并编辑代码，以快速实践所学。

安装和使用markdown-it-codesandbox

首先，你需要安装 markdown-it 和 markdown-it-codesandbox ，在命令行中执行以下代码：

npm install markdown-it markdown-it-codesandbox --save-dev

接下来，在你的代码中使用它们，可以参考下面的JS代码：

const MarkdownIt = require('markdown-it')
const codesandboxPlugin = require('markdown-it-codesandbox')

const md = new MarkdownIt()
md.use(codesandboxPlugin)
const resultHtml = md.render(markdownString)

以上代码中， markdownString 是你所需要转换的Markdown字符串。使用 markdown-it-codesandbox 插件将代码块转换为SandBox的方法非常简单：在代码块的开头，添加 codesandbox 标签。

```codesandbox
// 这里添加你的示例代码块

在这里， `<iframe>` 元素是通过 `codesandbox+HTML` 标签来生成的。你可以通过修改这个HTML来实现更多功能。例如，可以通过添加 `?hidenavigation=1` 参数来隐藏导航栏。与此相似的参数和值可以在Codesandbox的文档中找到。

另外，你还可以使用 `codesandbox+HTML` 标签插入你的代码到任何页面。以下是示例代码，可供参考：

```markdown
<codesandbox+HTML sandboxUrl="https://codesandbox.io/embed/8xyk063p7x"
  style={{ width: "20rem", height: "20rem" }}></codesandbox+HTML>

使用示例

假设你有一个可以组合两个数字的 add 函数。你可以使用以下Markdown代码来描述这个函数：

# Add Two Numbers

以下是一个简单的函数，它将两个数字相加。

```codesandbox
function add(a, b) {
  return a + b
}

-- -------------------- ---- -------

---------------------------------------------

-- --

------------------------ ---------------------------------------------------------------------------------------------------------------------------------------

- ------------------------------------------------------------------------------ --------
------------------------------------------------------------------------------------------------------------------------
展开代码