JSPM

vuepress-plugin-code-gen-box

0.0.9
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 1
  • Score
    100M100P100Q31132F
  • License MIT

πŸ“ Demo and code plugin for vuepress

Package Exports

  • vuepress-plugin-code-gen-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-plugin-code-gen-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-plugin-code-gen-box

code-gen-box 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>
:::

Features

  • Only one source code
  • Foldable code
  • Support online editing
    • βœ” Codepen
    • βœ” JSFiddle
    • βœ” CodeSandbox

Install

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

Usage

Write vuepress config

module.exports = {
  plugins: ['code-gen-box'],
}

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: 显瀺代码

The display text of unfold code button.

hideText

  • Type: String
  • Default: ιšθ—δ»£η 

The display text of fold code button.

minHeight

  • Type: Number
  • Default: 0(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