Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/BuptStEve/vuepress-plugin-demo-code
📝 Demo and code plugin for vuepress
https://github.com/BuptStEve/vuepress-plugin-demo-code
code demo vuepress vuepress-plugin
Last synced: 3 months ago
JSON representation
📝 Demo and code plugin for vuepress
- Host: GitHub
- URL: https://github.com/BuptStEve/vuepress-plugin-demo-code
- Owner: BuptStEve
- License: mit
- Created: 2019-01-27T10:10:31.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-10-17T01:59:10.000Z (over 1 year ago)
- Last Synced: 2024-03-19T07:41:14.207Z (3 months ago)
- Topics: code, demo, vuepress, vuepress-plugin
- Language: Vue
- Homepage: https://buptsteve.github.io/vuepress-plugin-demo-code/
- Size: 953 KB
- Stars: 124
- Watchers: 1
- Forks: 29
- Open Issues: 4
-
Metadata Files:
- Readme: README-zh_CN.md
- Changelog: CHANGELOG.md
- License: LICENSE
Lists
- awesome-stars - vuepress-plugin-demo-code - 📝 Demo and code plugin for vuepress (Vue)
README
vuepress-plugin-demo-code
English | 简体中文
> demo-code plugin for vuepress.
借助这个插件，你可以通过下述的语法在展示 demo 的同时，将这段代码展示出来。
```md
::: demo
Click me!
export default {
methods: {
onClick: () => { window.alert(1) },
},
}
:::
```
## Features
* 只有一份代码同时生成 demo 和 code
* 代码可折叠
* 支持在线编辑
* ✔ Codepen
* ✔ JSFiddle
* ✔ CodeSandbox
* 专门为浏览长代码进行了设计
* Sticky 的收起按钮
* 点击收起按钮时自动滚动到代码的顶部
## Install
* 首先安装 [vuepress v1.x](https://github.com/vuejs/vuepress)
* 接着安装插件
```bash
$ npm i -D vuepress-plugin-demo-code
# OR
$ pnpm i -D vuepress-plugin-demo-code
# OR
$ yarn add -D vuepress-plugin-demo-code
```
* 如果你用的是 [vuepress 2.x](https://v2.vuepress.vuejs.org/)，请安装 next 版本。
```bash
$ 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
```
## Usage
配置 vuepress config
```js
module.exports = {
plugins: ['demo-code'],
}
```
## Options
插件支持以下配置
```js
module.exports = {
plugins: [
['demo-code', {
jsLibs: [
// umd
'https://unpkg.com/tua-storage/dist/TuaStorage.umd.js',
],
cssLibs: [
'https://unpkg.com/[email protected]/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: { ... },
}]
],
}
```
### jsLibs
* 类型：`Array`
* 默认值：`[]`
展示 demo 所需的 js 库。
### cssLibs
* 类型：`Array`
* 默认值：`[]`
展示 demo 所需的 css 库。
### vueVersion
* 类型：`String` (语义化版本格式)
* 默认值：`^2.6.14`
vue 的语义化版本字符串。想要了解更多的语义化版本格式，可以看这里 [npm semver calculator](https://semver.npmjs.com/).
### showText
* 类型：`String`
* 默认值：`show code`
展开代码按钮的文案。
### hideText
* 类型：`String`
* 默认值：`hide code`
收起代码按钮的文案。
### minHeight
* 类型：`Number`
* 默认值：`200`(px)
代码收起时的高度。
### onlineBtns
* 类型：`Object`
* 默认值：`{ codepen: true, jsfiddle: true, codesandbox: true }`
展示哪些在线编辑的按钮。
### jsfiddle
* Type: `Object`
* Default: `{ framework: 'library/pure' }`
透传 [jsfiddle options](https://docs.jsfiddle.net/api/display-a-fiddle-from-post).
### codesandbox
* 类型：`Object`
* 默认值：`{ deps: {}, json: '', query: 'module=App.vue'', embed: '' }`
透传 [CodeSandbox options](https://codesandbox.io/docs/importing#define-api).
> `deps` is dependencies
### demoCodeMark
* 类型：`String`
* 默认值：`demo`
插件的标记，即跟在 `:::` 后的标记。
### copyOptions
* 类型：`Object/Boolean`
* 默认值：`{ align: 'top', selector: '.demo-and-code-wrapper div[class*="language-"] pre' }`
透传 [vuepress-plugin-code-copy](https://github.com/znicholasbrown/vuepress-plugin-code-copy#options) 的参数，或传 `false` 禁用它。
## Related
* [vuepress-plugin-demo-block](https://github.com/xiguaxigua/vuepress-plugin-demo-block)
## License
[MIT](http://opensource.org/licenses/MIT)
Copyright (c) StEve Young
## Contributors ✨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
StEve Young
💻 📖 🚇 🌍
leandrofngl
🐛
Tian Jian
🐛
Spence
💻
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!