介绍
gatsby-remark-inline-codesandbox 是一个可以让你在Markdown中，通过一个简单的语法，引用Codesandbox项目的包。如果你正准备在自己的博客或者网站中使用Codesandbox，那么这个npm包就很适合你。
安装
可以通过下面的命令来安装这个npm包：
npm install --save gatsby-remark-inline-codesandbox
配置
如果你正在使用GatsbyJS的话，那么你可以在 gatsby-config.js 文件中进行配置：
-- -------------------- ---- -------
-------------- - -
-------- -
-
-------- ----------------------------
-------- -
-------- -
-
-------- -----------------------------------
-------- -
------------ -
-- --------------- ------------
-- ---------------- ------------------------------
-- -------------------------------
-- ----------------- --------------------------
---- ---------------------------------
--
--
--
--
--
--
--
-如何使用
使用这个扩展的语法是非常简单的。只需要在Markdown中，引用一个Codesandbox的项目ID。具体使用方法如下：
这是一个非常不错的Codesandbox项目，项目ID是: `my-cool-sandbox-id:{FILE_NAME}`。
这是一个依赖于React的Codesandbox项目，项目ID是: `my-awesome-react-project:{FILE_NAME}`。详解一下，如果你有一个项目，它的Codesandbox链接是 https://codesandbox.io/s/my-cool-sandbox-id，那么 my-cool-sandbox-id 就是需要被引用的项目ID。格式就是这样：{PROJECT_ID}:{FILE_NAME}。
其中，{FILE_NAME} 是你需要展示的文件名，如果你需要引用整个项目的话，可以省略这个参数。
示例代码
Markdown代码
这是一个非常不错的Codesandbox项目，项目ID是: `my-cool-sandbox-id:index.js`。
渲染的结果
这是一个非常不错的Codesandbox项目，项目ID是: my-cool-sandbox-id:index.js。
结论
如果你想要在自己的博客或者网站中引用Codesandbox，那么使用 gatsby-remark-inline-codesandbox 这个npm包，将是你的不二选择。它非常简单易用，而且可以轻松地集成到你的GatsbyJS项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb6a1b5cbfe1ea06115a7