/
Markdown.vue
39 lines (36 loc) · 947 Bytes
/
Markdown.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
<template>
<component :is="tag" class="content" v-html="content" />
</template>
<script>
import MarkdownIt from 'markdown-it'
import hljs from 'highlight.js'
export default {
name: 'Markdown',
props: {
tag: { type: String, default: 'article' },
markdown: { type: String, required: true }
},
computed: {
content() {
const md = new MarkdownIt({
linkify: true,
typographer: true,
highlight: (str, lang) => {
if (lang && hljs.getLanguage(lang)) {
try {
return hljs.highlight(lang, str).value
} catch (__) {}
}
return '' // use external default escaping
}
})
.use(require('markdown-it-deflist'))
.use(require('markdown-it-sub'))
.use(require('markdown-it-sup'))
.use(require('markdown-it-footnote'))
return md.render(this.markdown)
}
}
}
</script>
<style scoped></style>