md解密 vue_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]*?(?=)/gi, v => {
   

v = v.replace(/_&/g, ' ').replace(/"/g, '"').replace(/</g, '').replace(/&/g, '&');

return Prism.highlight(v, Prism.languages.javascript);

});

return (

`

${html}

`

);

}

module.exports = markdownLoader;

使用

项目使用的是vue-cli 3.x，在vue.config.js添加以下配置</