Vuepress v1 插件

简介

1. 使用自定义 ::: demo 语法，写一遍示例即可自动生成组件示例与代码示例；
2. 支持在md中使用 import 语法；
3. 支持code在线编辑,包括编辑含import的代码，但不支持在编辑页额外import其它的文件

安装

1npm i vuepress-plugin-code-block-edit -D

使用

在 .vuepress/config.js 添加此插件:

1module.exports = {
2  plugins: ['code-block-edit']
3}

开发

在进行完以上操作后，您即可使用本插件所有功能进行文档开发

在.md 文件中使用以下语法

1::: demo
2
3```vue
4<template>
5  <div>
6    <p>{{message}}</p>
7    <input v-model="message" placeholder="输入"></input>
8  </div>
9</template>
10<script>
11  export default {
12    data() {
13      return {
14        message: ''
15      }
16    }
17  };
18</script>
19```
20

进阶

如果您没有自己的vuepress项目，本插件也支持一键生vuepress配置，安装相关npm包

在您的项目根目录下使用

npx vuepress-plugin-code-block-edit init

致谢

1. 本插件代码参考 https://github.com/waycowei/vuepress-plugin-demo-container-v2 author：@waycowei
2. code-block 与 code-edit 出自于明源云大客服前端团队 @luchx @suxq

向以上人员致谢

许可

MIT License

源码地址

https://github.com/wangziweng7890/vuepress-plugin-code-block-edit