【vue】实现markdown

最近在做的一个团队写作项目，里面涉及到写周报的功能，在这里用markdown是最好的解决方法，采用了vue-markdown插件将文本转换为markdown格式，并使用highlight.js来实现代码高亮。

vue-markdown

首先安装vue-markdown

npm i vue-markdown

使用很简单：

import VueMarkdown from 'vue-markdown' //直接作为一个组件引入
export default {
    name: 'demo',
    data() {
        return {
            content: '## 这里是要展示的markdown文字，也可以通过props传递'
        }
    },
    components: {
        VueMarkdown // 声明组件
    }
}

在html中，直接使用该组件

<vue-markdown :source="content"></vue-markdown>

展示如下：

此时没有样式，下面我们引入highlight.js来实现代码高亮

highlight.js

首先安装highlight.js

npm i highlight.js

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

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)
    })
})

使用：

<vue-markdown v-highlight :source="content"></vue-markdown>

展示如下：

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