0.1.0 • Published 3 years ago
vuepress-plugin-demo-codemirror v0.1.0
vuepress-plugin-demo-codemirror(基于vuepress-plugin-demo-block)
Introduction
该插件是vuepress插件，是基于vuepress-plugin-demo-block修改，因为demo-block的在线运行是jsfiddle和codeopen, 这两个在线运行在国内运行起来并不容易，有时需要翻墙，且开发的代码需要上传到CDN，无法满足内网在线运行的需求，所以就将codemirror集成进来，能够在不需要网络的条件下，实现在线运行的需求。
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
install plugin
npm i vuepress-plugin-demo-codemirror --save-devset vuepress config
config.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-codemirror'
]
}Start
Write the following code in the Markdown file:
Vue Demo
::: demo
```html
<template>
<div class="box-vue">Vue {{ message }}</div>
</template>
<script>
export default {
data: () => ({ message: 'Hello World' })
}
</script>
<style>
.box-vue { color: red; }
</style>
` ` ` <= delete spaces here
:::React Demo
::: demo [react]
```js
export default class App extends React.Component {
constructor (props) {
super(props)
this.state = { message: 'Hello World' }
}
render () {
return (
<div className="box-react">
React {this.state.message}
</div>
)
}
}
App.__style__ = `
.box-react { color: red; }
`
` ` ` <= delete spaces here
:::VanillaJs Demo
::: demo [vanilla]
```html
<html>
<div id="vanilla-box"></div>
</html>
<script>
var box = document.getElementById('vanilla-box')
box.innerHTML = 'Hello World!'
</script>
<style>
#vanilla-box {
color: red;
}
</style>
` ` `
:::