Vue显示md文件

起因

今天在写vue项目的时候，需要让vue动态显示本地的md文件。

这里采用了 showdown.js 与 axios 进行解决。

showdown.js

github：https://github.com/showdownjs/showdown

Bower

bower install showdown

npm (server-side)

npm install showdown

NuGet package

PM> Install-Package showdownjs

axios

npm

npm install axios

步骤

然后在需要添加md支持的页面引入

import axios from 'axios';
import showdown from 'showdown'

md的显示

  data() {
    return {
      content:""
    };
  },
created() {
    var that = this;
    axios
      .get(md文件地址)
      .then((response) => {
       
        var converter = new showdown.Converter({tables: true,emoji:true});
        var defaultOptions = converter.getOptions();
        var text      = response.data;
        var html      = converter.makeHtml(text);
        that.content = html;
      });
  },

在html代码向显示md的位置加入以下

<div v-html="content" class="center"></div>

至此页面就可以正常的动态读取md文件显示了。

总结

本方法就是使用了showdown.js将md文件渲染成html展示。如有更多需求大家可以去他们的 github 看一下文档。

我的vue页面完整代码

<template>

  <div class="home">
    
    <el-page-header @back="goBack" :content="data.title != undefined ? data.title:'404'"> </el-page-header>
    <div>
      <div v-html="content" class="center"></div>
    </div>
  </div>
</template>
<style src="../assets/css/md.css"></style>

<script>

import store from "../store/";
import axios from 'axios';
import showdown from 'showdown'

export default {
  data() {
    return {
      data: store.state.helpData,
      content:""
    };
  },
  created() {
    
    var that = this;
    axios
      .get("static/content/help/" + this.data.id + ".md")
      .then((response) => {
       
        var converter = new showdown.Converter({tables: true,emoji:true});
        var defaultOptions = converter.getOptions();
        var text      = response.data;
        var html      = converter.makeHtml(text);
        that.content = html;
      });
  },

  methods: {
    goBack() {
      this.$router.go(-1);
    },
  },
};
</script>

<style>
</style>

注意这里的 data 变量是我使用了 vuex 传递的信息与md的显示无关