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

jiezi

5 年前

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

npm install hyperdown prismjs -D

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(/(?<=<pre><code[^>]*?>)[\s\S]*?(?=<\/code><\/pre>)/gi, v => {v = v.replace(/_&/g, '').replace(/&quot;/g,'"').replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&');
    return Prism.highlight(v, Prism.languages.javascript);
  });
  return (`<template><div class="markdown">${html}</div></template>`
  );
}

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

<template>
  <test-md></test-md>
</template>
<script>
  import testMd from './test.md';

  export default {components: {testMd},

md 组件效果

当然也可以作为路由组件来使用，最终实现如下预期效果

自撸 loader 的另一个好处就是自由度高，我们可以随意扩展功能，比如既然 md 文件被解析成 vue 组件，因为文档通常都伴随着实例，如果能在里面 md 里面插入 slot 在使用中我们随意在插槽中插入实例，那可太方便了，实现起来也就是一个正则的事

function markdownLoader(val) {let parser = new HyperDown();
  let html = parser.makeHtml(val);
  html = html.replace(/(?<=<pre><code[^>]*?>)[\s\S]*?(?=<\/code><\/pre>)/gi, v => {v = v.replace(/_&/g, '').replace(/&quot;/g,'"').replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&');
    return Prism.highlight(v, Prism.languages.javascript);
  });
  // 解析 slot 转换为正常标签
  html = html.replace(/&lt;slot[\s\S]*?&gt;&lt;\/slot&gt;/gi, v => {v = v.replace(/_&/g, '').replace(/&quot;/g,'"').replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&');
    return v;
  });
  return (`<template><div class="markdown">${html}</div></template>`
  );
}

现在我们可以在 md 文件里面直接写 slot 插槽了
test-slot.md

# 扩展 slot 
###default
这里插入一个默认插槽
<slot></slot>
####footer
这里插入一个具名插槽
<slot name="footer"></slot>

在我们实例中使用这个组件试试效果

<template>
  <test-slot>
    <el-button type="primary">default</el-button>
    <template v-slot:footer>
      <el-button type="success">footer</el-button>
    </template>
  </test-slot>
</template>
<script>
  import testSlot from './test-slot.md'

  export default {
    components: {testSlot},

运行 done

https://github.com/akebe/e-admin

创建 loader

使用

扩展 slot