Vue解析Markdown实现

经实测，vue-markdown的效果更好

marked

npm install marked --save

具体使用：

<template>
  <div class="article" v-html="compiledMarkdown"></div>
</template>

<script>
import marked from 'marked'

export default {
  data () {
   return {
   content: ""
   }
  }

  computed: {
    compiledMarkdown () {
      return marked(this.content, { sanitize: true })
    }
  }
}
</script>

vue-markdown

npm i vue-markdown

具体使用：

<template>
  <vue-markdown class="article" :source="content"></vue-markdown>
</template>

<script>
import VueMarkdown from 'vue-markdown'  //直接作为一个组件引入

export default {
  name: 'demo',
  data() {
    return {
      content: '## 这里是要展示的markdown文字，也可以通过props传递'
    }
  },
  components: {
    VueMarkdown  // 声明组件
  }
}
</script>

引入highlight.js实现代码高亮

npm install highlight.js --save

在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)
  })
})

具体使用：

<div v-html="compiledMarkdown" v-highlight></div>

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

更多vue-markdown使用方法参考：https://github.com/miaolz123/vue-markdown
更多highlight.js使用方法参考：https://github.com/isagalaev/highlight.js