看 vue-macros 官网时，看到比较有意思的代码提示功能，才知道是用了 twoslash 功能。
它是用的 @shikijs/vitepress-twoslash 插件，但是本主题是 vuepress 而不是 vitepress，有点遗憾。

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

缘由

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

如果想要文章分两栏来展示的话，可以借助 CSS 的 columns 来完成。

为了方便直接使用，做了一个 css 文件。

起因是为了方便管理文章，将文章按目录存放，但是这样存放后，地址栏和导航栏会自动多一层路径。

如果启用了 AutoCatalog 功能的话，会自动显示目录，不开启的话，显示会有问题。
AutoCatalog 显示的目录不太符合文章的风格，想做成显示文章列表的样子，于是就写了 AutoArticles 功能。
同时，验证了一下自定义布局的功能。

自定义布局

为了在文章目录下显示文章列表，默认的布局无法实现，因此需要自定义布局。

自定义布局，需要在 client.ts 中加入自己的布局。

本插件用来显示 gitlab 作为版本管理的 vuepress-theme-hope 项目的贡献者。

初衷

公司领导想提高效率，征集经验集，工具集以方便大家使用，于是就用 vuepress-theme-hope 搭了个简单的知识库。
再配合 waline 加上了评论功能。

由于是内网环境，所以在公司的 gitlab 服务器上建了一个 git 仓库。
为了鼓励大家积极踊跃地分享，写了个 GitlabContributors 组件，在主页上显示贡献者头像。

后来，又在每个页面上写了一个当前页的贡献者组件 PageGitlabContributors。

让你的 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-theme-hope 主题，主题简洁，markdown 插件功能丰富。
同时，vuepress-theme-hope 提供了完善的文档，以及 QQ 交流群，作者 Mr.Hope 更新频率高，问题反馈处理也很及时。

使用 vuepress-theme-hope 时，发现了一些小问题，自己重写了一点 css，根据文档可以替换组件，或者继承主题实现自己的主题。
最开始修改过的导航栏跟博主信息的间距问题，文章置顶图标，已经提过 PR 不需要再自定义了。
下面介绍一下自定义的部分。

让你的 VuePress 站点的 Markdown 文件支持 ECharts 图表。

使用本插件时，需要自己安装 echarts 依赖，本插件会将 echarts 加到 optimizeDeps 中。
另外，本插件使用了 vueuse，用来做宽度自适应。

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