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

正在撸一个基于 element 的中后台框架，文档与开发同步进行。
文档部分涉及了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
 
 
### Install
```
npm install e-admin --save
```
### Start  
在 `main.js` 中写入以下内容：
```
import Vue from 'vue';
import App from './App.vue';
import router from './router';

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

import Ea from 'e-admin';
import 'e-admin/lib/index.css';

Vue.use(ElementUI).use(Ea);

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
  router,
}).$mount('#app');
```
 
 
test.vue