vue中引入md文件，解析为组件并实现代码高亮

正在造一个的中后台框架轮子 e-admin ，文档与开发同步进行。
文档部分涉及了markdown解析，刚开始是尝试使用现成库 vue-markdown-loader，但是代码高亮部分不好定制处理，遂放弃。
第一次尝试自已写个loader，出乎意料的简单。
markdown解析使用的是hyperdown；
代码高亮通过prismjs实现；
代码高亮部分刚开始是尝试用highlight.js但是不知为何JavaScript第一行的格式化会出现异常，用prismjs则无此问题。
首先安装依赖

npm install hyperdown prismjs -D

创建loader

markdown-loader.js

const HyperDown = require('hyperdown');
const Prism = require('prismjs');

function markdownLoader(val) {
  let parser = new HyperDown();
  let html = parser.makeHtml(val);
  html = html.replace(/(?<=
]*?>)[\s\S]*?(?=<\/code><\/pre>)/gi, v => {
    v = v.replace(/_&/g, ' ').replace(/"/g, '"').replace(/</g, '<').replace(/>/g, '>').replace(/&/g, '&');
    return Prism.highlight(v, Prism.languages.javascript);
  });
  return (
    ``
  );
}

module.exports = markdownLoader;
 
 
使用
 
 
项目使用的是vue-cli 3.x，在vue.config.js添加以下配置
 
 
module.exports = {
  configureWebpack: config => {
    config.module.rules.push({
        test: /\.md$/,
        use: [
          {
            loader: 'vue-loader',
          },
          {
            loader: require.resolve('./markdown-loader'),
          },
        ],
      },
    );
  },
};
 
 
在入口文件main.js导入prismjs样式
 
 
import 'prismjs/themes/prism.css';
 
 
现在可以把.md文件当成vue组件来使用了
test.md
 
 
 
 
test.vue