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
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容