Vue CLI3 使用 Marked 渲染 Markdown 格式数据

发表于 更新于

说明

需求是需要把 Markdown 格式的内容解析为 HTML，于是使用 Marked.js 完成该操作。

仓库：Marked.js ，引入使用之类的不提。

默认解析出来的内容不大美观，所以需要再渲染一下。

下面提供了我尝试过的三种引入方式，主要是渲染样式的使用方式不同。

按渲染方式分：方式一和方式二都是使用 Marked 自己的功能实现的。而 方式三只是粗暴地用 CSS 覆盖了默认样式。

方式一对每个展示的 Vue 文件都需要引入一次样式，而方式二和方式三用了 main.js 引入的方式实现了全局样式。但是方式二只能全局，方式三则用 CSS 覆盖实现了自定义样式。

其实主要就分为方式一和方式二，分别对应单独配置与全局配置。方式只不过是在方式二全局配置的基础上，使用 CSS 为单独组件覆盖了全局配置。

一般来说大家都是全局统一渲染样式吧？所以我推荐使用方式二。

下文以引入渲染样式 github-markdown.css 为例。

方式一

单个 Vue 文件即可实现.

index.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
// index.vue // 只需要这个文件
<template>
  <div class="post">
    <div class="title">
      <h2>{{ this.article.title }}</h2>
    </div>
    <div class="container">
      <div class="markdown-body">
        <div v-html="compileMarkdown" v-highlight></div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import Marked from "Marked";
// 这里引入想要的样式
import "../../../node_modules/github-markdown-css/github-markdown.css";
let renderMd = new Marked.Renderer();
Marked.setOptions({
  renderer: renderMd,
  gfm: true,
  tables: true,
  breaks: false,
  pedantic: false,
  sanitize: false,
  smartLists: true,
  smartypants: false,
  // 引入样式
  highlight: function(code) {
    return require("highlight.js").highlightAuto(code).value;
  }
});

export default {
  components: {
  },
  data() {
    return {
      article: {
        content: "加载中……"
      }
    };
  },
  computed: {
    compileMarkdown() {
      return Marked(this.article.content, { sanitize: true });
    }
  },
  created: function() {
    this.$ajax({
      url: "/api/article/id",
      method: "get",
      params: {
        id: this.$route.params.id
      }
    }).then(res => {
      if (res.status === 200) {
        this.article = res.data;
      } else {
        //报错
      }
    });
  }
};
</script>

<style scoped>
.post .title {
  margin-top: 50px;
  text-align: center;
  font-size: 24;
}
</style>

方式二

方式二、方式三都需要三个文件。

方式二是全局定义渲染样式，方式三则可以覆盖全局渲染样式。

index.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
// index.vue
<template>
  <div class="post">
    <div class="title">
      <h2>{{ this.article.title }}</h2>
    </div>
    <div class="container">
      <div class="markdown-body">
        <div v-html="compileMarkdown" v-highlight></div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import Marked from "Marked";
// 不用下面这种引入样式了
// import "../../../node_modules/github-markdown-css/github-markdown.css";
let renderMd = new Marked.Renderer();
Marked.setOptions({
  renderer: renderMd,
  gfm: true,
  tables: true,
  breaks: false,
  pedantic: false,
  sanitize: false,
  smartLists: true,
  smartypants: false,
  // 这个配置实际放到 highlight.js,然后在 main.js 引入
  //highlight: function(code) {
  //  return require("highlight.js").highlightAuto(code).value;
  //}
});

export default {
  components: {
  },
  data() {
    return {
      article: {
        content: "加载中……"
      }
    };
  },
  computed: {
    compileMarkdown() {
      return Marked(this.article.content, { sanitize: true });
    }
  },
  created: function() {
    this.$ajax({
      url: "/api/article/id",
      method: "get",
      params: {
        id: this.$route.params.id
      }
    }).then(res => {
      if (res.status === 200) {
        this.article = res.data;
      } else {
        //报错
      }
    });
  }
};
</script>

<style scoped>
.post .title {
  margin-top: 50px;
  text-align: center;
  font-size: 24;
}
</style>

highlight.js

1
2
3
4
5
// highlight.js import Hljs from 'highlight.js' // 这里引入css import
'highlight.js/styles/github.css' let HighLight = {}; HighLight.install =
function (Vue) { Vue.directive('highlight', function (el) { let blocks =
el.querySelectorAll('pre code'); blocks.forEach((block) => {
Hljs.highlightBlock(block) }) }); } export default HighLight;

main.js

1
2
// main.js …… // highlight.js 路径相应更改 import HighLight from
'@/utils/highlight.js' Vue.use(HighLight); ……

方式三

在 highlight.js 中定义的实际上是全局的 Markdown 解析样式，如果其他地方需要自定义渲染样式，引入 Vue 就行。

index.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
// index.vue
<template>
  <div class="post">
    <div class="title">
      <h2>{{ this.article.title }}</h2>
    </div>
    <div class="container">
      <div class="markdown-body">
        <div v-html="compileMarkdown" v-highlight></div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import Marked from "Marked";
// 不用下面这种引入样式了
// import "../../../node_modules/github-markdown-css/github-markdown.css";
let renderMd = new Marked.Renderer();
Marked.setOptions({
  renderer: renderMd,
  gfm: true,
  tables: true,
  breaks: false,
  pedantic: false,
  sanitize: false,
  smartLists: true,
  smartypants: false,
  // 这个配置实际放到 highlight.js,然后在 main.js 引入
  //highlight: function(code) {
  //  return require("highlight.js").highlightAuto(code).value;
  //}
});

export default {
  components: {
  },
  data() {
    return {
      article: {
        content: "加载中……"
      }
    };
  },
  computed: {
    compileMarkdown() {
      return Marked(this.article.content, { sanitize: true });
    }
  },
  created: function() {
    this.$ajax({
      url: "/api/article/id",
      method: "get",
      params: {
        id: this.$route.params.id
      }
    }).then(res => {
      if (res.status === 200) {
        this.article = res.data;
      } else {
        //报错
      }
    });
  }
};
</script>

<style scoped>
// 直接引入样式覆盖。
@import "../../../node_modules/github-markdown-css/github-markdown.css";
.post .title {
  margin-top: 50px;
  text-align: center;
  font-size: 24;
}
</style>

highlight.js 与 main.js

同方式二。