vuepress-plugin-demo-codemirror

v0.1.0

Published

3 years ago

vue codemirror for vuepress both support vue and react

Downloads

0High
0Medium
0Low

yushuaixue

vuepress-plugin demo-block demo-codemirror

vuepress-plugin-demo-codemirror(基于vuepress-plugin-demo-block)

download

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.

demo

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-dev

set 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>
` ` `
:::