Example of a method to implement Vue's markdown document can run online

The Vue code in the markdown document is executable, and can be executed while watching. In this way, you can write your own Vue blog in the form of a markdown document, which can easily introduce your own original components and perform coolly.

Github

/zhangKunUserGit/vue-markdown-run

DEMO

/vue-markdown-run/dist/

Install

npm install vue-markdown-run --save

usage

(1) Complete introduction

// Introduceimport MarkdownRun from 'vue-markdown-run';
// Global injection(MarkdownRun);

(2) Introduce on demand

With the helpbabel-plugin-component , We can only introduce the required components to achieve the purpose of reducing the size of the project.

First, install babel-plugin-component:

npm install babel-plugin-component -save-dev

Then, modify .babelrc to:

{
 "plugins": [
  [
   "component",
   {
    "libraryName": "vue-markdown-run",
    "styleLibraryName": "theme"
   }
  ]
 ]
}

Next, if you just need to introduce some components, write the following:

import { MarkdownRun } from 'vue-markdown-run';

export default {
 components: {
  MarkdownRun
 }
}

Usage of components

 <markdown-run
  :mark="markdownTxt"
  highlight-style-file-name="github"
  :runClass=""
  :runStyle=""
  @error=""
 />

Parameter description

parameter	value	default value	illustrate
:mark	Must pass (String)	none	markdown text string (for details, please see the "markdownTxt writing requirements" below)
:scope	Non(Object)	none	If you do not want to introduce the components globally, you can introduce them locally. Please see the DEMO above for usage.
highlight-style-file-name	Non-String	'github'	The markdown code part style file name, here is the specified style (css) file to introduce. For details, please refer to:/stati...Styles
:runClass	Non-String	none	The css style name at the Vue running code
:runStyle	Non(Object)	none	The inter-line style name at the Vue running code
@error	Non-Function	none	Callback function for the current component execution failed

markdownTxt writing requirements

The code must specify which component needs to be executed, and write vue-run on it, otherwise it will be considered ordinary text and will not be executed.

vue-run is placed after the language type and requires spaces, for example:

```html vue-run
&lt;template&gt;
 &lt;div @click="go"&gt;Hello, {{name}}! You can click to try&lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
 export default {
  data() {
   return {
    name: 'Vue'
   }
  },
 methods: {
   go () {
    alert('Click to pop up, code vue has been executed');
   }
  }
 }
&lt;/script&gt;
&lt;style&gt;
 div{
 background-color: red;
 }
&lt;/style&gt;

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.