vuepress-plugin-demo-code

Downloads per month Version Next Version License

English | 简体中文

demo-code plugin for vuepress.

借助这个插件,你可以通过下述的语法在展示 demo 的同时,将这段代码展示出来。

::: demo
<div @click="onClick">Click me!</div>

<script>
export default {
  methods: {
    onClick: () => { window.alert(1) },
  },
}
</script>
:::

实际效果请点击这里

# Features

  • 只有一份代码同时生成 demo 和 code
  • 代码可折叠
  • 支持在线编辑
    • ✔ Codepen
    • ✔ JSFiddle
    • ✔ CodeSandbox
  • 专门为浏览长代码进行了设计
    • Sticky 的收起按钮
    • 点击收起按钮时自动滚动到代码的顶部

# Install

$ npm i -D vuepress-plugin-demo-code
# OR
$ pnpm i -D vuepress-plugin-demo-code
# OR
$ yarn add -D vuepress-plugin-demo-code
$ npm i -D vuepress-plugin-demo-code@next
# OR
$ pnpm i -D vuepress-plugin-demo-code@next
# OR
$ yarn add -D vuepress-plugin-demo-code@next

# Usage

配置 vuepress config

module.exports = {
  plugins: ['demo-code'],
}

# Options

插件支持以下配置

module.exports = {
  plugins: [
    ['demo-code', {
      jsLibs: [
        // umd
        'https://unpkg.com/tua-storage/dist/TuaStorage.umd.js',
      ],
      cssLibs: [
        'https://unpkg.com/animate.css@3.7.0/animate.min.css',
      ],
      vueVersion: '^3',
      showText: 'show code',
      hideText: 'hide',
      styleStr: 'text-decoration: underline;',
      minHeight: 200,
      onlineBtns: {
        codepen: true,
        jsfiddle: true,
        codesandbox: true,
      },
      jsfiddle: {
        framework: 'library/pure', // default
        // framework: 'vue/2.6.11',
      },
      codesandbox: {
        deps: { 'lodash': 'latest' },
        json: '',
        query: '',
        embed: '',
      },
      demoCodeMark: 'demo-code',
      copyOptions: { ... },
    }]
  ],
}

# jsLibs

  • 类型:Array
  • 默认值:[]

展示 demo 所需的 js 库。

# cssLibs

  • 类型:Array
  • 默认值:[]

展示 demo 所需的 css 库。

# vueVersion

  • 类型:String (语义化版本格式)
  • 默认值:^2.6.14

vue 的语义化版本字符串。想要了解更多的语义化版本格式,可以看这里 npm semver calculator (opens new window).

# showText

  • 类型:String
  • 默认值:show code

展开代码按钮的文案。

# hideText

  • 类型:String
  • 默认值:hide code

收起代码按钮的文案。

# minHeight

  • 类型:Number
  • 默认值:200(px)

代码收起时的高度。

# onlineBtns

  • 类型:Object
  • 默认值:{ codepen: true, jsfiddle: true, codesandbox: true }

展示哪些在线编辑的按钮。

# jsfiddle

  • Type: Object
  • Default: { framework: 'library/pure' }

透传 jsfiddle options (opens new window).

# codesandbox

  • 类型:Object
  • 默认值:{ deps: {}, json: '', query: 'module=App.vue'', embed: '' }

透传 CodeSandbox options (opens new window).

deps is dependencies

# demoCodeMark

  • 类型:String
  • 默认值:demo

插件的标记,即跟在 ::: 后的标记。

# copyOptions

  • 类型:Object/Boolean
  • 默认值:{ align: 'top', selector: '.demo-and-code-wrapper div[class*="language-"] pre' }

透传 vuepress-plugin-code-copy (opens new window) 的参数,或传 false 禁用它。

# License

MIT (opens new window)

Copyright (c) StEve Young

# Contributors ✨

Thanks goes to these wonderful people (emoji key (opens new window)):


StEve Young

💻 📖 🚇 🌍

leandrofngl

🐛

Tian Jian

🐛

Spence

💻

This project follows the all-contributors (opens new window) specification. Contributions of any kind welcome!