vue项目把文本转换为markdown文档

最近在一个项目中，需要有用户使用手册功能，在这里用markdown，采用了vue-markdown插件。

1.下载vue-markdown

$ npm i vue-markdown

2.如何使用

// 在js页面
import VueMarkdown from 'vue-markdown' //直接组件引入
export default {
    name: 'markdown',
    data() {
        return {
            content: '## 这里是要展示的markdown文字'
        }
    },
    components: {
        VueMarkdown // 声明组件
    }
}
// 在html 页面
<vue-markdown :source="content"></vue-markdown>

3.展示效果

---

下面内容非原创

此时没有样式，下面我们引入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>