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
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' copyOptions: ...
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 :::
.
copyOptions
- Type:
Object/Boolean
- Default:
{ align: 'top', selector: '.demo-and-code-wrapper div[class*="language-"] pre' }
It passes vuepress-plugin-code-copy's options, or false
to disable it.
Related
License
Copyright (c) StEve Young
Contributors ✨
Thanks goes to these wonderful people (emoji key):
StEve Young 💻 📖 🚇 🌍 |
leandrofngl 🐛 |
Tian Jian 🐛 |
This project follows the all-contributors specification. Contributions of any kind welcome!