實現(xiàn)Vue 的 markdown 文檔可以在線運行

Jacendfeng 發(fā)布于2019-08-23 13:59 / 1819人閱讀

摘要：實現(xiàn)的文檔可以在線運行一個組件，用于文檔中代碼執(zhí)行，可以邊看邊執(zhí)行。放在語言類型后面，需要空格，例如你可以點擊試試點擊彈出，代碼已執(zhí)行如有問題請聯(lián)系郵箱微信號

實現(xiàn)Vue 的 markdown 文檔可以在線運行

一個vue組件，用于markdown 文檔中Vue代碼執(zhí)行，可以邊看邊執(zhí)行。

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"
      }
    ]
  ]
}

接下來，如果你只需引入部分組件，寫入以下內(nèi)容：

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

export default {
  components: {
    MarkdownRun
  }
}

組件的用法

參數(shù)說明

參數(shù)	值	默認值	說明
: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)	無	當前組件執(zhí)行失敗的回調函數(shù)

markdownTxt 寫法要求

代碼中必須指定哪個組件是需要執(zhí)行的，在上面寫上vue-run, 否則認為是普通文本，不予執(zhí)行。
vue-run 放在語言類型后面，需要空格，例如：

"```html vue-run

如有問題請聯(lián)系

郵箱： 1766597067@qq.com

微信號： 18625531739

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/99885.html

前端資源分享-只為更好前端

摘要：一團隊組織網(wǎng)站說明騰訊團隊騰訊前端團隊，代表作品，致力于前端技術的研究騰訊社交用戶體驗設計，簡稱，騰訊設計團隊網(wǎng)站騰訊用戶研究與體驗設計部百度前端研發(fā)部出品淘寶前端團隊用技術為體驗提供無限可能凹凸實驗室京東用戶體驗設計部出品奇舞團奇虎旗下前一、團隊組織網(wǎng)站說明騰訊 AlloyTeam 團隊騰訊Web前端團隊，代表作品WebQQ，致力于前端技術的研究 ISUX 騰...

zxhaaa 2019-08-22 16:11 評論0 收藏0
前端資源分享-只為更好前端

摘要：一團隊組織網(wǎng)站說明騰訊團隊騰訊前端團隊，代表作品，致力于前端技術的研究騰訊社交用戶體驗設計，簡稱，騰訊設計團隊網(wǎng)站騰訊用戶研究與體驗設計部百度前端研發(fā)部出品淘寶前端團隊用技術為體驗提供無限可能凹凸實驗室京東用戶體驗設計部出品奇舞團奇虎旗下前一、團隊組織網(wǎng)站說明騰訊 AlloyTeam 團隊騰訊Web前端團隊，代表作品WebQQ，致力于前端技術的研究 ISUX 騰...

JouyPub 2019-08-02 10:10 評論0 收藏0
前端資源分享-只為更好前端

摘要：一團隊組織網(wǎng)站說明騰訊團隊騰訊前端團隊，代表作品，致力于前端技術的研究騰訊社交用戶體驗設計，簡稱，騰訊設計團隊網(wǎng)站騰訊用戶研究與體驗設計部百度前端研發(fā)部出品淘寶前端團隊用技術為體驗提供無限可能凹凸實驗室京東用戶體驗設計部出品奇舞團奇虎旗下前一、團隊組織網(wǎng)站說明騰訊 AlloyTeam 團隊騰訊Web前端團隊，代表作品WebQQ，致力于前端技術的研究 ISUX 騰...

vslam 2019-08-30 15:53 評論0 收藏0
《HelloGitHub》第 68 期

摘要：在線嘗試的進程管理工具。項目包含了代碼實現(xiàn)運行過程動畫以及相關論文為系統(tǒng)提供人臉識別解鎖電腦的工具。在線閱讀教科書計算機體系結構基礎第三版。 .markdown-body{word-break:break-word;line-height:1.75;font-weight:400;font-size:15px;overflow-x:hidden;color:#333}.markdown-b...

番茄西紅柿 2021-11-26 11:10 評論0 收藏2637