‚̧Neglected Parking Meter

    vuepress-code-box

    0.0.2¬†‚Äʬ†Public¬†‚Äʬ†Published

    vuepress-code-box

    Build Status Coverage Status Downloads per month Version License

    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

    Install

    $ npm i -D vuepress-code-box
    # OR 
    $ yarn add -D vuepress-code-box

    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',
            }]
        ],
    }

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

    Related

    License

    MIT

    Install

    npm i vuepress-code-box

    DownloadsWeekly Downloads

    0

    Version

    0.0.2

    License

    MIT

    Unpacked Size

    31.4 kB

    Total Files

    13

    Last publish

    Collaborators

    • avatar