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
First of all, install vuepress v1.x
Then install the plugin
$ npm i -D vuepress-plugin-demo-code
# OR
$ pnpm i -D vuepress-plugin-demo-code
# OR
$ yarn add -D vuepress-plugin-demo-code
$ npm i -D vuepress-plugin-demo-code@next
# OR
$ pnpm i -D vuepress-plugin-demo-code@next
# OR
$ yarn add -D vuepress-plugin-demo-code@next
Write vuepress config
module.exports = {
plugins: ['demo-code'],
}
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',
],
vueVersion: '^3',
showText: 'show code',
hideText: 'hide',
styleStr: 'text-decoration: underline;',
minHeight: 200,
onlineBtns: {
codepen: true,
jsfiddle: true,
codesandbox: true,
},
jsfiddle: {
framework: 'library/pure', // default
// framework: 'vue/2.6.11',
},
codesandbox: {
deps: { 'lodash': 'latest' },
json: '',
query: '',
embed: '',
},
demoCodeMark: 'demo-code',
copyOptions: { ... },
}]
],
}
Array
[]
Js libraries for the demo.
Array
[]
Css libraries for the demo.
String
(semantic versioning syntax)^2.6.14
The semantic version string of vue. For more information on semantic versioning syntax, see the npm semver calculator.
String
show code
The display text of unfold code button.
String
hide code
The display text of fold code button.
Number
200
(px)The height of the code when it is folded.
Object
{ codepen: true, jsfiddle: true, codesandbox: true }
Display online edit buttons.
Object
{ framework: 'library/pure' }
It passes jsfiddle options.
Object
{ deps: {}, json: '', query: 'module=App.vue'', embed: '' }
It passes CodeSandbox options.
deps
is dependencies
String
demo
The mark of the plugin, follows the tag after :::
.
Object/Boolean
{ align: 'top', selector: '.demo-and-code-wrapper div[class*="language-"] pre' }
It passes vuepress-plugin-code-copy's options, or false
to disable it.
Copyright (c) StEve Young
Thanks goes to these wonderful people (emoji key):
StEve Young 💻 📖 🚇 🌍 |
leandrofngl 🐛 |
Tian Jian 🐛 |
Spence 💻 |
This project follows the all-contributors specification. Contributions of any kind welcome!