• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

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

互联网 diligentman 6天前 6次浏览

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


    程序员灯塔
    转载请注明原文链接:在vuepress中实现类似element-ui 的代码预览效果
    喜欢 (0)