首先: 了解學(xué)習(xí)showdown.js

安裝
npm i showdown --save-dev

引用
import showdown from 'showdown'

其次：了解學(xué)習(xí)highlight.js

安裝
npm i highlight --save-dev

引用
import hljs from 'highlight.js'
import 'highlight.js/styles/monokai-sublime.css'

自定義指令

Vue.directive('highlight', function (el, binding) {
  var converter = new showdown.Converter()
  el.innerHTML = converter.makeHtml(binding.value)
  setTimeout(() => {
    hljs.highlightBlock(el)
  }, 500)
})

使用readme.md文件

<div v-highlight="content"></div>

import RM from './readme.md'
this.content = RM.toString()

效果

豆芽圖片20190816150715289.png