分享一个vuepress查看代码插件

用vuepress写组件文档的困扰

近期在用vuepress给组件写文档，在展示用例的时候，总想同时展示源码。

但是导入代码段的语法<<< @/filepath写起来会有点烦，因为一般你的示例代码都是放在docs/.vuepress/components路径下面，这就导致你想引入组件代码，就得写好长一段路径。

而且，如果你的示例代码比较多，上百行，到时候又会显得你的页面很长，体验不是很好。

---

如果能够像一些组件库的官网那样，代码可以点击查看，再收起，体验就会很好了。

没有现成的插件吗？

在写这个插件之前，有找过相关插件，但发现基本都有个缺点。就是都是把代码写在markdown文件里，这样就得不到代码提示之类的东西。

---

于是写了一个vuepress的插件vuepress-plugin-code-example，用法也十分简单，只需要给到文件相对于docs/.vuepress/components这个路径的地址即可。

::: code-example path-to-file
:::

例如，你的组件路径是docs/.vuepress/components/demo.vue

::: code-example demo.vue
:::

效果预览

也可查看我的组件库文档erpack在线体验效果。

有个小亮点

总会有示例代码很长很长，当你展开的时候，你再想收起来，就得往上翻好几下。
于是我给了一个按键交互，当你在看某个示例的时候，按下键盘上的ESC键可以切换源码的展示与隐藏。（需要先点击一下这个示例块）

---

欢迎吐槽样式太丑的问题。