Add Sandpack playground Support

[FuckDoctors]

是否需要添加 Sandpack Playground 支持。

加入的话，会额外引入依赖（虽然是懒加载），依赖较大。

中途版代码：feat/sandpack

[FuckDoctors]

代码示例：

::: sandpack#vue Vue demo with customized options

@file src/App.vue

```vue
<script setup>
import { ref } from "vue";

const msg = ref("Hello Playground!");
</script>

<template>
  <h1>{{ msg }}</h1>
  <input v-model="msg" />
</template>
```

@options

```js
{
  readOnly: true,
  showReadOnly: true
}
```

@setup

```js
{
  entry: "/index.js",
}
```

:::

• sandpack#template sandpack 关键字后面加 template
• @file fullpath-file 使用 @file 定义文件
• @options 定义 sandpack 的 options，js 块
• @setup 定义 sandpack 的 customSetup，js 块

[Mister-Hope]

可以，如果 playground 做多了，我们可以把它独立成一个新的插件，然后把体积大的依赖设成 peers

[FuckDoctors]

@Mister-Hope feat/sandpack 代码初版完成，有空了可以 review 一下。
或者你直接修改了 😄

[FuckDoctors]

@Mister-Hope 大佬求助。
我想实现可以给单个文件设置 options，想官网的 active, readOnly, hidden。

要设的选项使用 { 和 } 括起来，忽略使用 \ 转义的内容，跟 attrs 类似。

@file /src/App.vue {active readOnly}

单元测试跟预想的一样，但是实际运行效果不一样。。。
代码我推送了，有空了帮忙看看 😅

示例：

::: sandpack Sandpack demo with options

@file /src/App.vue {readOnly hidden}

```vue
<script setup>
import { ref } from 'vue'
const msg = ref('Hello World!')
</script>
<template>
  <h1>{{ msg }}</h1>
  <input v-model="msg" />
</template>
```

@file /src/Comp.vue {active}

```vue
<template>
  <div>Comp</div>
</template>
```

@file Comp2.vue \\{hidden}

```vue
<template>
  <div>Comp2</div>
</template>
```

:::

[Mister-Hope]

也就是我可以理解为，这些参数你成功解析了，但是运行的时候有问题？

[FuckDoctors]

是的。vitest 能解析，打包后运行不行，是不是正则表达式有问题。。

[Mister-Hope]

Emm, 我回头看看吧。近期比较忙

[FuckDoctors]

好的。我也是趁项目收尾摸鱼弄的 😄

[FuckDoctors]

功能上实现了。
不太熟markdown-it，调查了好久，发现vuepress里花括号貌似识别不了。（单元测试了的markdown却可以）
改成方括号就可以了。