Vue怎么渲染Markdown数据

插件网址链接vue-markdown - npm (npmjs.com)

实现过程

1.需要提前安装的npm包

npm i vue-loader vue-template-compiler -D

2.再安装vue-markdown插件

npm install --save vue-markdown

3.在需要用到的地方引入刚刚安装的插件

import VueMarkdown from 'vue-markdown'
export default {
  components: {
    VueMarkdown //注册组件
  },
  data () {
    return { 
      mdVal : val  //mdVal的值是要解析的markdown数据
    }
  }
}

4.使用注入的组件

<VueMarkdown :source="mdVal"></VueMarkdown>

5.使用后组件的样式有时候是不太喜欢的这个就可以去下载需要的css样式包，通常是使用

npm install github-markdown-css

然后在main.js中进行引入

import 'github-markdown-css/github-markdown.css'

用盒子包裹class名为markdown-body

<div class="markdown-body">
    <VueMarkdown :source="value"></VueMarkdown>
</div>

6.如果需要代码高亮的话通常是使用npm install highlight.js 然后在mian文件中编写vue自定义指令

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

最后在组件上使用v-heightConst即可