让你的 VuePress 站点中的 Markdown 文件支持 Sandpack 类似的代码案例。

缘由

手头的项目刚刚收尾，看知乎一个 React 和 Vue 撕逼问题时，里面提到了最新的 React 的一些新特性，也附上了 React 新的官网 react.dev . 出于好奇点了进去，然后看到了官网的可交互示例，觉得不错，然后看了下源代码，发现是使用的 sandpack-react。
看了下 sandpack 官网，感觉功能挺强大的，集成到 vuepress 里做代码演示很不错。

让你的 VuePress 站点中的 Markdown 文件支持 Vue SFC Playground 类似的代码案例。

同时支持外置和内置两种模式：

• 外置模式，通过嵌入iframe的形式来引入 playground.
• 内置模式，通过@vue/repl直接渲染出来 playground.

比 v1 更强大。

让你的 VuePress 站点中的 Markdown 文件支持 Vue SFC Playground 类似的代码案例。

与 v2 相比，重写了 Markdown 插件的逻辑，减少 container 嵌套。

使用 @file, @imports, @settings 来代替原来的 ::: file, ::: imports, ::: settings, 其他未变。

让你的 VuePress 站点中的 Markdown 文件支持 Vue SFC Playground 类似的代码案例。