vuepress-plugin-demo-code

Build Status Coverage Status Downloads per month Version Next Version License

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

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

# 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',
            ],
            showText: 'show code',
            hideText: 'hide',
            styleStr: 'text-decoration: underline;',
            minHeight: 200,
            onlineBtns: {
                codepen: true,
                jsfiddle: true,
                codesandbox: true,
            },
            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.

# 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.

# 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.

# License

MIT

Copyright (c) StEve Young

# Contributors ✨

Thanks goes to these wonderful people (emoji key):

StEve Young
StEve Young

💻 📖 🚇 🌍
leandrofngl
leandrofngl

🐛
Tian Jian
Tian Jian

🐛

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

Made with ❤️ by Ahmad Mostafa - @z3by