實現Vue的markdown文檔可以在線運行的方法示例

2024-05-06 15:27:21

字體：大中小

來源：轉載

供稿：網友

markdown 文檔中Vue代碼可執行啦，而且可以邊看邊執行。這樣就可以用markdown文檔的形式，寫自己的Vue博客了，可以方便介紹自己的原創組件，很酷的執行。

Github

https://github.com/zhangKunUserGit/vue-markdown-run

DEMO

https://zhangkunusergit.github.io/vue-markdown-run/dist/

安裝

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)	無	當前組件執行失敗的回調函數