最近在一個專案中，需要有使用者使用手冊功能，在這裡用markdown，採用了vue-markdown外掛。

1.下載vue-markdown

$ npm i vue-markdown

2.如何使用

// 在js頁面
import VueMarkdown from 'vue-markdown' //直接元件引入
export default {
    name: 'markdown',
    data() {
        return {
            content: '## 這裡是要展示的markdown文字'
        }
    },
    components: {
        VueMarkdown // 宣告元件
    }
}
// 在html 頁面
<vue-markdown :source="content"></vue-markdown>

 

3.展示效果

下面內容非原創

此時沒有樣式，下面我們引入highlight.js來實現程式碼高亮

highlight.js

首先安裝highlight.js

npm i highlight.js

在main.js中註冊一個新的指令

import hljs from 'highlight.js'
import 'highlight.js/styles/googlecode.css'

Vue.directive('highlight', (el) => {
    let blocks = el.querySelectorAll('pre code')
    blocks.forEach((block) => {
        hljs.highlightBlock(block)
    })
})
 

使用：

<vue-markdown v-highlight :source="content"></vue-markdown>