关于vuepress:在vuepress中实现类似elementui-的代码预览效果

在 vuepress 中实现相似 element-ui 的代码预览成果

1. vuepress-plugin-demo-container

1. 介绍：是一个基于 Vuepress 的插件，它能够帮忙你在编写文档的时候减少 Vue 示例，它的诞生初衷是为了升高编写组件文档时减少一些相干示例的难度

2. 根本实现原理：

   Demo Container 应用 Vuepress 的 chainMarkdown、extendMarkdown API 拓展了其外部的 markdown 对象，以特定规定辨认代码块，扩大 markdown.render 办法已实现最终渲染。

   1. 其余相似选项：
   • vuepress-plugin-demo-block
   • vuepress-plugin-demo-code
   • vuepress-plugin-extract-code

2. 引入：

1. 在 .vuepress/config.js 中配置：

   module.exports = {

   ​ plugins: [‘vuepress-plugin-demo-container’]

   }

   这里因为是以 vuepress-plugin 结尾，也能够写作

   module.exports = {

   ​ plugins: [‘demo-container’]

   }

3. 应用办法

​ 在 vuepress 中，可在 markdown 文件中间接写 vue 语句

​ 那么示例代码写为

​ ::: demo 测试文档编写

​ \“` vue

​ <template>

         <test></test>

​ </template>

​ <script>

     export default {data  () {return {}

          }

​ };

​ </script>

​ \“`

​ :::

​ 这时此代码块将被渲染为 element-ui 的代码预览成果。

​