Vue解析Markdown实现

经实测,vue-markdown的效果更好

marked

1
npm install marked --save

具体使用:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
<div class="article" v-html="compiledMarkdown"></div>
</template>

<script>
import marked from 'marked'

export default {
data () {
return {
content: ""
}
}

computed: {
compiledMarkdown () {
return marked(this.content, { sanitize: true })
}
}
}
</script>

vue-markdown

1
npm i vue-markdown

具体使用:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
<vue-markdown class="article" :source="content"></vue-markdown>
</template>

<script>
import VueMarkdown from 'vue-markdown' //直接作为一个组件引入

export default {
name: 'demo',
data() {
return {
content: '## 这里是要展示的markdown文字,也可以通过props传递'
}
},
components: {
VueMarkdown // 声明组件
}
}
</script>

引入highlight.js实现代码高亮

1
npm install highlight.js --save

在main.js中注册一个新的指令

1
2
3
4
5
6
7
8
9
import hljs from 'highlight.js'
import 'highlight.js/styles/googlecode.css'

Vue.directive('highlight', (el) => {
let blocks = el.querySelectorAll('pre code')
blocks.forEach((block) => {
hljs.highlightBlock(block)
})
})

具体使用:

1
<div v-html="compiledMarkdown" v-highlight></div>
1
<vue-markdown :source="content" v-highlight></vue-markdown>

更多vue-markdown使用方法参考:https://github.com/miaolz123/vue-markdown
更多highlight.js使用方法参考:https://github.com/isagalaev/highlight.js

Powered by AppBlog.CN     浙ICP备14037229号

Copyright © 2012 - 2020 APP开发技术博客 All Rights Reserved.

访客数 : | 访问量 :