在vue中解析md文档并显示

原创

前端小tips

发布于 2021-11-30 15:51:08

6.2K0

发布于 2021-11-30 15:51:08

一、首先引入几个解析包

npm install markdown-loader html-loader marked -S --registry=https://registry.npm.taobao.org

【说明:】markdown-loader、html- loader是为了让vue能够解析md格式的文件，读取出来，然后使用marked将读取出来的数据转换成html格式渲染到页面上。使用marked是为了使用更方便。

二、配置 webpack.base.conf.js，如果使用的是 vue-cli 3 以上版本则在vue.config.js中配置

webpack.base.conf.js 配置：在 module > rules 中添加一条规则

module: {
    rules: [
        // 配置读取 *.md 文件的规则
        {
            test: /\.md$/,
             use: [
                { loader: 'html-loader' },
                { loader: 'markdown-loader', options: {} }
             ]
        }
    ]
}

vue.config.js 配置：

const path = require("path");
module.exports = {
  configureWebpack: {
    module: {
      rules: [
        // 配置读取 *.md 文件的规则
        {
          test: /\.md$/,
          use: [
            { loader: "html-loader" },
            { loader: "markdown-loader", options: {} }
          ]
        }
      ]
    }
  }
};

三、使用

在需要使用的地方，引入 marked，再将 md 文档交给它来解析，获得到解析后的 HTML 格式内容，再将解析后的内容渲染到页面上

<template>
  <div>
    <div>文档</div>
    <div v-html="articalContent"></div>
  </div>
</template>

<script>
const marked = require("marked");
export default {
  data() {
    return {
      articalContent: ""
    };
  },
  created() {
    this.$axios.get("/articles/test.md").then(res => {
        const htmlMD = marked(res.data);

        this.articalContent = htmlMD;
      });
  }
};
</script>

四、样式

到现在为止，只是将文档正确解析并显示到了页面上，但是没有任何样式，我们可以再给渲染的内容加上样式，比如使用 github 的样式：

npm install github-markdown-css -S --registry=https://registry.npm.taobao.org

在main.js中将github-markdown-css导入

import 'github-markdown-css';

在相应容器添加markdown_body样式

<div v-html="articalContent" class="markdown-body"></div>

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

webpack