VitePress 脚本运行预览插件

前阵子在编写部门的前端代码模板的，对于组件，可以用 vitepress-demo-preview 插件来做代码示例与效果实时预览。

但是写到工具函数时犯了难，要怎么才能让大家可以直观看出工具函数的效果呢？总不能为了一个时间转换的工具函数写一个组件来预览吧。

如果可以有一个 vitepress 容器插件，把示例代码放里面，然后下面就可以显示运行结果，那就很棒了~

Google GitHub 搜索了一波，结果是并无此便利的插件。既然如此，那就只能写个了。

于是，就有了 vitepress-script-preview，实现效果如下：

这里可以看看 Demo

使用方式十分简单，按照文档引入插件后，就可以直接在 Vitepress 的 Markdown 中写：

::: script-preview

console.info('Hello VitePress!');

:::

就可以实时运行得到 Hello VitePress。如果要调用函数，就需要通过 registerContext 将函数注册到上下文中，然后就可以在 Markdown 中调用了。

示例因为包含 script 标签，我发不上来，可以到这里查看

如果要打印 Object ，可以用 console.dir。具体效果可以到 Demo 页看看。

这就是预览插件的全部功能了。