vue中显示markdown文件为html

1.安装插件

npm install marked -D
npm install highlight.js -D

  npm install markdown-loader -D

　npm install html-loader -D

2.增加loader

{
    test: /\.md$/,
    use: [{
            loader: 'html-loader'
        },
        {
            loader: 'markdown-loader',
        }
    ]
}

3.在主js下，也就是 app.js 下定义自定义指令

  import hljs from 'highlight.js'

Vue.directive('highlight', function (el) {  //注意这里是highlight；没有带js，因为这里是用来指定指令的
    let blocks = el.querySelectorAll('pre code');
    blocks.forEach((block) => {
        hljs.highlightBlock(block)
    })
})

4.然后在标签下调用
#在要使用高亮的地方使用v-highlight指令

<div v-html="Marked" v-highlight></div>

5.具体调用

<template>
    <div class="md-wrapper">
        <div v-html="code" v-highlight></div>
    </div>
</template>
<script>
import page from "./index.md";
import marked from "marked";
import "highlight.js/styles/atelier-cave-light.css"; //这里可以选择不同的样式主题【主要是code的渲染样式】
export default {
  data() {
    return {
      code: page
    };
  },
  mounted() {
    this.code = marked(this.code);
  }
};
</script>
<style lang="scss" scoped>
</style>

6. 最后最好编写一份自定义的css样式；，其中table边框为单边框的样式为：

table {
        border-collapse: collapse;
        border-spacing: 0;
        padding: 0;
        th {
            background: #999;
        }
        th,
        td {
            border: 1px solid #eee;
            padding: 10px 20px;
        }
    }