Package Exports

vuepress-plugin-demo-code
vuepress-plugin-demo-code/src/node/index.js

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-code) 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,
            },
            jsfiddle: {
                framework: 'library/pure', // default
                // framework: 'vue/2.6.11',
            },
            codesandbox: {
                deps: { 'lodash': 'latest' },
                json: '',
                query: '',
                embed: '',
            },
            demoCodeMark: 'demo-code',
        }]
    ],
}