hhy5277 / vuepress-plugin-code-example

vuepress-plugin-code-example

你总不想你的示例文档要这么写吧？

## 基本用法

<table-basic-usage />
<<< @/docs/.vuepress/components/table/basic-usage.vue

那你就可以用这个插件了。

Install

yarn add vuepress-plugin-code-example

Vuepress Config

.vuepress/config.js

module.exports = {
  plugins: ["code-example"],
};

Usage

首先参考官网的使用组件章节，编写你的组件示例代码。

比如你的示例代码文件路径为 .vuepress/components/demo.vue

然后在你的.md文件里，按照如下格式编写。

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

code-example会被插件解析到，后面填写组件的相对路径即可。

Feature

• 复制代码
• 查看代码（支持按 ESC 切换，毕竟当代码太长的时候，往回翻也是很麻烦的。）

Preview

在线效果

可参考我的一个组件库文档erpack

FAQ

• 基于vuepress1.x

注意，目前插件代码里面包含了ant-design-vue的代码，所以要在你的项目中先安装该依赖。
我会尽快移除该限制。

Todo

• 优化样式
• 提供主题参数
• 方便二次开发
• 提供vuepress2.x的支持