Package Exports

vuepress-plugin-demo-code2

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vuepress-plugin-demo-code2) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

vuepress-plugin-demo-block

License

MIT

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!