實現Vue 的 markdown 文檔能夠在線運行

實現Vue 的 markdown 文檔能夠在線運行

一個vue組件，用於markdown 文檔中Vue代碼執行，能夠邊看邊執行。

Github

https://github.com/zhangKunUs...

DEMO

https://zhangkunusergit.githu...

安裝

npm install vue-markdown-run --save

用法

(1)完整引入

// 引入
import MarkdownRun from 'vue-markdown-run';
// 全局注入
Vue.use(MarkdownRun);

(2)按需引入

藉助 babel-plugin-component，咱們能夠只引入須要的組件，以達到減少項目體積的目的。

首先，安裝 babel-plugin-component：

npm install babel-plugin-component -save-dev

而後，將 .babelrc 修改成：

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

接下來，若是你只需引入部分組件，寫入如下內容：

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

export default {
  components: {
    MarkdownRun
  }
}

組件的用法

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

參數說明

參數	值	默認值	說明
:mark	必傳(String)	無	markdown文本字符串(具體要求請看下面的「markdownTxt 寫法要求」)
:scope	非(Object)	無	markdown文本中，引入的組件，若是不想全局引入，能夠局部引入，用法請看上面的DEMO
highlight-style-file-name	非(String)	'github'	markdown代碼部分樣式文件名，此處是指定引入那種樣式（css）文件 詳細請參考：https://highlightjs.org/stati... 中Styles
:runClass	非(String)	無	Vue運行代碼處的css樣式名稱
:runStyle	非(Object)	無	Vue運行代碼處的行間樣式名稱
@error	非(Function)	無	當前組件執行失敗的回調函數

markdownTxt 寫法要求

代碼中必須指定哪一個組件是須要執行的，在上面寫上vue-run, 不然認爲是普通文本，不予執行。
vue-run 放在語言類型後面，須要空格，例如：

'```html vue-run
<template>
  <div @click="go">Hello, {{name}}! 你能夠點擊試試</div>
</template>

<script>
  export default {
    data() {
      return {
        name: 'Vue'
      }
    },
 methods: {
      go () {
        alert('點擊彈出， 代碼vue已執行');
      }
    }
  }
</script>
<style>
 div{
  background-color: red;
 }
</style>

若有問題請聯繫

郵箱： 1766597067@qq.com

微信號： 18625531739