Vue+showdown+highlight.js

首先: 了解学习showdown.js

安装
npm i showdown --save-dev

引用
import showdown from 'showdown'

其次：了解学习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