vuepress-plugin-demo-block - GitLite

KO | EN

gitlite — search

#hacktoberfest #ai #llm #go #deep-learning #macos #nodejs #windows #awesome #awesome-list #pytorch #security #mcp #openai

vuepress-plugin-demo-block

(★ 114)

write vue, react, vanilla js demo in vuepress

File Explorer

Download Latest Version (.zip)

- config.yml
- - config.js
- - react.md
  - README.md
  - settings.md
  - vanilla.md
  - vue.md
- react.md
- README.md
- settings.md
- vanilla.md
- vue.md
- clientRootMixin.js
- index.js
- - constants.js
  - utils.js
- - code-sandbox.svg
  - codepen.svg
  - jsfiddle.svg
- - codepen.js
  - jsfiddle.js
- clientRootMixin.js
- index.js
- main.js
- style.less
.babelrc
.gitignore
.npmignore
demo.png
deploy.sh
LICENSE
package.json
README.md
rollup.config.js
yarn.lock

# Installation Guide

1. Get the code

git clone https://github.com/xiguaxigua/vuepress-plugin-demo-block

Downloads the entire project code from GitHub to your computer.

cd vuepress-plugin-demo-block

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm i vuepress-plugin-demo-block --save-dev

Type this command into your terminal and run it.

['script', { src: 'https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js' }],

Type this command into your terminal and run it.

['script', { src: 'https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js' }],

Type this command into your terminal and run it.

['script', { src: 'https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js' }],

Type this command into your terminal and run it.

['script', { src: 'https://cdn.jsdelivr.net/npm/@babel/standalone/babel.min.js' }],

Type this command into your terminal and run it.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# vuepress-plugin-demo-block

![download](https://img.shields.io/npm/dm/vuepress-plugin-demo-block.svg)
[![version](https://img.shields.io/npm/v/vuepress-plugin-demo-block.svg)](https://www.npmjs.com/package/vuepress-plugin-demo-block)
![language](https://img.shields.io/badge/language-javascript-yellow.svg)
![License](https://img.shields.io/badge/license-MIT-000000.svg)
[![](https://img.shields.io/circleci/project/github/xiguaxigua/vuepress-plugin-demo-block/master.svg)](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.

![demo](https://raw.githubusercontent.com/xiguaxigua/vuepress-plugin-demo-block/master/demo.png)

## 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
<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
```js
::: 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

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