在vuepress中实现类似element-ui 的代码预览效果

Posted 2021-09-29 。。

在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. 安装：

   npm install vuepress-plugin-demo-container --save-dev

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的代码预览效果。

​