vue中使用md文件

第一步：

安装解析md文档的插件

npm install markdown-loader  html-loader --save-dev

npm install  showdown --save-dev

markdown-loader 的用途是让webpack使用标记的
由于标记的输出是HTML，因此最好与html-loader一起使用
Showdown 是一个开源的Markdown编辑器，我们可以使用它在前端快速的实现我们的Markdown编辑器的功能

第二步:

安装语法高亮的插件

npm install highlight.js --save-dev

第三步

创建highlight.js的配置文件

src/utils/highlight.js

// highlight.js  代码高亮指令
import Hljs from 'highlight.js';
import 'highlight.js/styles/tomorrow-night.css'; // 代码高亮风格

let Highlight = {};
// 自定义插件
Highlight.install = function (Vue) {
    // 自定义指令 v-highlight
    Vue.directive('highlight', {
        // 被绑定元素插入父节点时调用
        inserted: function(el) {
            let blocks = el.querySelectorAll('pre code');
            for (let i = 0; i < blocks.length; i++) {
                Hljs.highlightBlock(blocks[i]);
            }
        },
        // 指令所在组件的 VNode 及其子 VNode 全部更新后调用
        componentUpdated: function(el) {
            let blocks = el.querySelectorAll('pre code');
            for (let i = 0; i < blocks.length; i++) {
                Hljs.highlightBlock(blocks[i]);
            }
        }
    })
};

export default Highlight;

第四步:

全局引入高亮插件

main.js中

import Highlight from './utils/highlight'; 
Vue.use(Highlight);

第五步:

使用

<template>
  <div v-highlight>
    <code v-html="md"></code>
 </div>
</template>
 
<script>
  import md from "./test.md";
  export default {
    data() {
      return {
        md:md
      };
    }
  };
</script>

参考链接:
Highlight.js 语法高亮
vue中如何使用md文件。highlight.js高光处理
教你如何在前端实现markdown编辑器