vue解析markdown字符串并展示（代码高亮+代码行号显示）

上周看了很久的md然后弄得差不多了嘛，但是上次那个只支持md文件的解析，如果是直接解析字符串的话，就没有办法了。
所以，今天看了也搞了好久…
解析md文件看这里
解析md字符串看下面

---

在上一次的基础上，

1. 安装依赖
   1. npm install text-loader --save
   2. npm install vue-markdown --save
2. 在 webpack.base.config.js 里原有loader下加入 loader: 'text-loader'
3. 在要引入md的页面：

<template>
  <div class="markdown-body">
    <vue-markdown  :source="msg"></vue-markdown>
  </div>
</template>
<script>
import VueMarkdown from 'vue-markdown'
export default {
     
  name: 'mdDisplay',
  data() {
     
    return {
     
                   msg:'```html \n
\n cash:  \n to:  \n \n
 \n```'

    }
  },
  components:{
     
    VueMarkdown,
  }
}
</script>

4. 如果没有高亮：

<vue-markdown  v-highlight>{
     {
     msg}}</vue-markdown>

5. main.js里加：

import VueHighlightJS from 'highlight.js';
Vue.use(VueHighlightJS)
Vue.directive('highlight', (el) => {
     
  let blocks = el.querySelectorAll('pre code')
  blocks.forEach((block) => {
     
    VueHighlightJS.highlightBlock(block)
  })
})

6. 效果：