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