Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: about 2 months ago
JSON representation

📝 Demo and code plugin for vuepress

Awesome Lists containing this project

README

        

vuepress-plugin-demo-code



Downloads per month
Version
Next Version
License

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!