最近在一个项目中,需要有用户使用手册功能,在这里用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>