JSPM

vuepress-code-box

0.0.2
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
    • 0
  • Score
    100M100P100Q26097F
  • License MIT

📝 Demo and code plugin for vuepress

Package Exports

  • vuepress-code-box

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-code-box) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

License

MIT