xiguaxigua / vuepress-plugin-demo-block Goto Github PK

View Code? Open in Web Editor NEW

113.0 0.0 25.0 1.48 MB

write vue, react, vanilla js demo in vuepress

Home Page: https://daxigua.me/vuepress-plugin-demo-block

License: MIT License

Shell 0.56% JavaScript 89.06% CSS 10.37%

vuepress vuepress-plugin demo-block

vuepress-plugin-demo-block's Introduction

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

install plugin

npm i vuepress-plugin-demo-block --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-block'
  ]
}

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

vuepress-plugin-demo-block's People

Contributors

Stargazers

vuepress-plugin-demo-block's Issues

同一个页面插入多个原生模板后，后面模板的样式会覆盖前一个模板的

feat: change style logic

element-ui的 el-table 不能正常运行显示

安装了插件之后，使用element-ui的 el-table 不能正常运行显示table。但是有 table 元素显示。不知道什么问题。

页面引入vue.min.js会影响nav导航router-link-active样式的切换

config.js中配置vue demo所需要的vue.min.js文件

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

会影响到页面nav导航的样式class类router-link-active的切换，不知道怎么解决这个问题。

Please, how to show angular1.x demo

my code:

::: demo [vanilla]

<html>
  <div ng-app="myApp" ng-controller="myCtrl">
      {{ firstName + " " + lastName }}
  </div>
</html>
<script>
  var app = angular.module("myApp", []);
  app.controller("myCtrl", function($scope) {
      $scope.firstName = "John";
      $scope.lastName = "Doe";
      console.log('$scope: ', $scope);
  });
</script>
<style>
#vanilla-box {
  color: red;
}
</style>

:::

feat: add online edit

add online edit version as vuep.

不能直接使用 .vuepress/components/ 里定义的组件吗

/.vuepress/components/ 里定义的组件已经默认全局注册了，但是直接引用无效，是使用方法有问题吗?

feat: optimize impressions on your phone

bug: when building docs, reports error.

As shown above, it may look like need to do some compatibility processing.

怎么使用 src 下面的组件

::: demo
```vue
<template>
  <GupoButton>111</GupoButton>
</template>

<script>
import GupoButton from "../../../../src/components/Basic/Button";

export default {
  component: {GupoButton}
}
</script>
` ` `
:::

支持vuepress2吗？

bug: Functions in vanilla javascript

Defined functions inside <script> block could not be executed using events in html, for example:

<html>
  <div id="test" onclick="someFunction()"></div>
</html>
<script>
function someFunction() {
  alert('Hello world');
}
</script>

In this code the function someFunction can be executed

与vuepress-plugin-demo-code这个插件无法同时存在

安装vuepress-plugin-demo-block后,无法使用,只能安装vuepress-plugin-demo-code

[Feature request] load demo-block content form an other file

I need to use demo-block with content from an other file. Is it possible ? A way to add this feature ?

::: demo
--> Here : link to file (for me, it's *.vue file)
:::

feat: support default script tag

problem

It will throw a error when i ignore script tag，because of scirpt tag is unnecessary in my markdown docs. like below：

solution

Pull Request：#23