分享一个vuepress查看代码插件
用vuepress写组件文档的困扰
近期在用vuepress
给组件写文档,在展示用例的时候,总想同时展示源码。
但是导入代码段的语法<<< @/filepath
写起来会有点烦,因为一般你的示例代码都是放在docs/.vuepress/components
路径下面,这就导致你想引入组件代码,就得写好长一段路径。
而且,如果你的示例代码比较多,上百行,到时候又会显得你的页面很长,体验不是很好。
如果能够像一些组件库的官网那样,代码可以点击查看,再收起,体验就会很好了。
没有现成的插件吗?
在写这个插件之前,有找过相关插件,但发现基本都有个缺点
。就是都是把代码写在markdown
文件里,这样就得不到代码提示之类的东西。
于是写了一个vuepress
的插件vuepress-plugin-code-example,用法也十分简单,只需要给到文件相对于docs/.vuepress/components
这个路径的地址即可。
::: code-example path-to-file
:::
【分享一个vuepress查看代码插件】例如,你的组件路径是
docs/.vuepress/components/demo.vue
::: code-example demo.vue
:::
效果预览
文章图片
也可查看我的组件库文档erpack在线体验效果。
有个小亮点 总会有示例代码很长很长,当你展开的时候,你再想收起来,就得往上翻好几下。
于是我给了一个按键交互,当你在看某个示例的时候,按下键盘上的
ESC
键可以切换源码的展示与隐藏。(需要先点击一下这个示例块)欢迎吐槽样式太丑的问题。
推荐阅读
- 一个人的旅行,三亚
- 一个小故事,我的思考。
- 一个人的碎碎念
- 第326天
- 七年之痒之后
- 我从来不做坏事
- 异地恋中,逐渐适应一个人到底意味着什么()
- 迷失的世界(二十七)
- live|live to inspire 一个普通上班族的流水账0723
- 遗憾是生活的常态,但孝顺这件事,我希望每一个人都不留遗憾