https://github.com/xiguaxigua/vuepress-plugin-demo-block
write vue, react, vanilla js demo in vuepress
https://github.com/xiguaxigua/vuepress-plugin-demo-block
demo-block vuepress vuepress-plugin
Last synced: 9 months ago
JSON representation
write vue, react, vanilla js demo in vuepress
- Host: GitHub
- URL: https://github.com/xiguaxigua/vuepress-plugin-demo-block
- Owner: xiguaxigua
- License: mit
- Created: 2018-12-30T11:26:26.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-28T06:06:22.000Z (almost 3 years ago)
- Last Synced: 2025-03-31T14:15:34.489Z (9 months ago)
- Topics: demo-block, vuepress, vuepress-plugin
- Language: JavaScript
- Homepage: https://daxigua.me/vuepress-plugin-demo-block
- Size: 1.44 MB
- Stars: 113
- Watchers: 0
- Forks: 24
- Open Issues: 35
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vuepress-plugin-demo-block
[](https://www.npmjs.com/package/vuepress-plugin-demo-block)
[](https://circleci.com/gh/xiguaxigua/vuepress-plugin-demo-block)
## Introduction
The Demo Block is used to help you add vue, react or native js examples when writing a document. When writing component documentation, you usually need to add some related examples to the document. These examples can usually be implemented using JSFiddle or Codepen's Iframe, but the maintenance cost will be relatively high. You can quickly add examples by using Demo Block, and it is very convenient to modify.
> To show how to write the example, the three points used to mark the end of the code section are separated by spaces, and the spaces need to be removed when used.
## Feature
- Elegant display code and examples
- Support vue, react and native js
- Support codepen and jsfiddle online demo
## Install
### install vuepress
Reference official document [Vuepress](https://vuepress.vuejs.org)
### install plugin
```
npm i vuepress-plugin-demo-block --save-dev
```
### set vuepress config
config.js
```js
module.exports = {
head: [
['script', { src: 'https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js' }],
['script', { src: 'https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js' }],
['script', { src: 'https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js' }],
['script', { src: 'https://cdn.jsdelivr.net/npm/@babel/standalone/babel.min.js' }],
],
plugins: [
'demo-block'
]
}
```
## Start
Write the following code in the Markdown file:
### Vue Demo
```html
::: demo
```html
Vue {{ message }}
export default {
data: () => ({ message: 'Hello World' })
}
.box-vue { color: red; }
` ` ` <= delete spaces here
:::
```
### React Demo
```js
::: demo [react]
```js
export default class App extends React.Component {
constructor (props) {
super(props)
this.state = { message: 'Hello World' }
}
render () {
return (
React {this.state.message}
)
}
}
App.__style__ = `
.box-react { color: red; }
`
` ` ` <= delete spaces here
:::
```
### VanillaJs Demo
```html
::: demo [vanilla]
```html
var box = document.getElementById('vanilla-box')
box.innerHTML = 'Hello World!'
#vanilla-box {
color: red;
}
` ` `
:::
```