vuepress-code-box
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
-
First of all, install vuepress v1.x
-
Then install the plugin
$ npm i -D vuepress-code-box# OR $ yarn add -D vuepress-code-box
Usage
Write vuepress config
moduleexports = plugins: 'demo-code'
Options
This plugin supports the following configurations.
moduleexports = 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 :::
.