在vue中使页面支持markdown
在最近的开发中,遇到一个问题,就是博客都是使用markdown语法写的,我在自己的页面中怎么才能很好的渲染它们。
确定两种方法
- 1.将markdown转为html,网页读取html内容进行渲染。
- 2.网页直接读取markdown内容,然后解析为html进行渲染。
最终确定使用第二种方法,因为使用第一种方法的话,维护起来太不容易,想要修改博客内容时,每修改一次都得重新转一次html,而第二种方法只需要修改markdown内容即可。
这时候就需要考虑我们的网页拿到markdown内容之后如何解析为html。
1.marked.js
安装:npm install marked -S
安装完成后,markdown.vue如下:
<template>
<div>
<div id="content" v-html="compiledMarkdown"></div>
</div>
</template>
<script>
import marked from 'marked'
var rendererMD = new marked . Renderer ()
marked . setOptions ({
renderer: rendererMD ,
gfm: true ,
tables: true ,
breaks: false ,
pedantic: false ,
sanitize: false ,
smartLists: true ,
smartypants: false
})
export default {
name: 'markdown' ,
data () {
return {
content: '# hello `javascript` '
}
},
computed: {
compiledMarkdown : function () {
return marked ( this .input, { sanitize: true })
}
}
}
</script>
<style>
...
</style>
2.showdown.js
安装: npm install showdown --save
安装完成后,markdown.vue 如下:
<template>
<div>
<div id="content" v-html="compiledMarkdown"></div>
</div>
</template>
<script>
import showdown from "showdown"
converter.setOption('tables', true); // 可将表格显示出来
export default {
name: 'markdown' ,
data () {
return {
content: '# hello `javascript` '
}
},
computed: {
compiledMarkdown : function () {
return converter.makeHtml(this.content)
}
}
}
</script>
<style>
...
</style>
以上两种方法相差并不太多,当使用这两种方法的时候会发现,我们的代码块是没有什么样式的,美观性差了点,不过highlight.js可以解决这个问题。
1.安装highlight
npm install highlight --save
2.在main.js中添加自定义指令
import hljs from "highlight.js"
import 'highlight.js/styles/default.css';
// 定义自定义指令 highlight 使代码高亮
Vue.directive('highlight',function (el) {
let blocks = el.querySelectorAll('pre code');
blocks.forEach((block)=>{
hljs.highlightBlock(block)
})
})
3.将v-highlight 添加到我们使用的标签中即可
<template>
<div>
<div id="content" v-html="compiledMarkdown" v-highlight></div>
</div>
</template>
这时发现我们的代码已经高亮了。
3.markdown-it-vue
markdown-it-vue 是一个丰富的 markdown Vue 组件, 支持以下特性:
- markdown 语法
- GFM TOC
- GFM style
- emoji
- mermaid charts
- Echarts
- Subscript/Superscript
- AsciiMath
- Alter(自定义提示信息)
- info | error | warning message tip
插件列表:
- markdown-it
- markdown-it-emoji
- markdown-it-sub
- markdown-it-sup
- markdown-it-footnote
- markdown-it-deflist
- markdown-it-abbr
- markdown-it-ins
- markdown-it-mark
- markdown-it-katex
- markdown-it-task-lists
- markdown-it-highlight
- markdown-it-latex
- markdown-it-container
- markdown-it-github-toc
- markdown-it-source-map
- markdown-it-link-attributes
安装:npm install markdown-it-vue
简单使用:
<template>
<div>
<markdown-it-vue class="md-body" :content="content" />
</div>
</template>
<script>
import MarkdownItVue from 'markdown-it-vue'
import 'markdown-it-vue/dist/markdown-it-vue.css'
export default {
components: {
MarkdownItVue
},
data() {
return {
content: '# your markdown content'
}
}
}
</script>
使用高亮插件:
<template>
<div>
<markdown-it-vue-light class="md-body" :content="content" />
</div>
</template>
<script>
import MarkdownItVueLight from 'markdown-it-vue/dist/markdown-it-vue-light.umd.min.js'
import 'markdown-it-vue/dist/markdown-it-vue-light.css'
export default {
components: {
MarkdownItVueLight
},
data() {
return {
content: '# your markdown content'
}
}
}
</script>
我在自己的博客中选择了最后一种方法,别问,问就是nice!
个人见解,有错误请联系我,不胜感激。