关于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的代码预览成果。

​