vuepress-plugin-demo-code

📝 Demo and code plugin for vuepress

Last updated 4 years ago by buptsteve .

MIT · Repository · Original npm · Tarball · package.json

$ cnpm install vuepress-plugin-demo-code

SYNC missed versions from official npm registry.

vuepress-plugin-demo-code

English | 简体中文

demo-code plugin for vuepress.

With this plugin, you can both display demo and code via following syntax.

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

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

Please click here to see the demo

Features

Only one source code
Foldable code
Support online editing
- ✔ Codepen
- ✔ JSFiddle
- ✔ CodeSandbox
Designed for long code
- Sticky fold button
- Auto scroll to top when you fold code

Install

First of all, install vuepress v1.x
Then install the plugin

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

If you are using vuepress 2.x, please install the next version.

$ 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

Write vuepress config

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

Options

This plugin supports the following configurations.

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

Type: Array
Default: []

Js libraries for the demo.

cssLibs

Type: Array
Default: []

Css libraries for the demo.

vueVersion

Type: String (semantic versioning syntax)
Default: ^2.6.14

The semantic version string of vue. For more information on semantic versioning syntax, see the npm semver calculator.

showText

Type: String
Default: show code

The display text of unfold code button.

hideText

Type: String
Default: hide code

The display text of fold code button.

minHeight

Type: Number
Default: 200(px)

The height of the code when it is folded.

onlineBtns

Type: Object
Default: { codepen: true, jsfiddle: true, codesandbox: true }

Display online edit buttons.

jsfiddle

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

It passes jsfiddle options.

codesandbox

Type: Object
Default: { deps: {}, json: '', query: 'module=App.vue'', embed: '' }

It passes CodeSandbox options.

deps is dependencies

demoCodeMark

Type: String
Default: demo

The mark of the plugin, follows the tag after :::.

copyOptions

Type: Object/Boolean
Default: { align: 'top', selector: '.demo-and-code-wrapper div[class*="language-"] pre' }

It passes vuepress-plugin-code-copy's options, or false to disable it.

Related

vuepress-plugin-demo-block

License

Copyright (c) StEve Young

Contributors ✨

Thanks goes to these wonderful people (emoji key):

_{StEve Young}
???? ???? ???? ????

_leandrofngl
????

_{Tian Jian}
????

This project follows the all-contributors specification. Contributions of any kind welcome!

Current Tags

1.0.0 ... latest (4 years ago)
2.0.0-beta.1 ... next (4 years ago)
0.7.0-0 ... test (4 years ago)

34 Versions

Maintainers (1)

Downloads

Today 0

This Week 1

This Month 8

Last Day 0

Last Week 27

Last Month 34

Dependencies (4)

Dev Dependencies (32)

Dependents (0)

None

Copyright 2013 - present © cnpmjs.org | Home |