安装
npm install highlight.js
自定义指令
// Vue-cli生成的工程文件的src/main.js
import hljs from 'highlight.js'
import 'highlight.js/styles/googlecode.css' //样式文件
Vue.directive('highlight',function (el) {
let blocks = el.querySelectorAll('pre code');
blocks.forEach((block)=>{
hljs.highlightBlock(block)
})
})
使用
<pre v-highlight>
<code v-html="code">
</code>
</pre>
封装为插件
// highlight.js
import Vue from 'vue'
import Hljs from 'highlight.js'
import 'highlight.js/styles/googlecode.css'
let Highlight = {}
Highlight.install = function (Vue, options) {
Vue.directive('highlight', function (el) {
let blocks = el.querySelectorAll('pre code');
blocks.forEach((block) => {
Hljs.highlightBlock(block)
})
})
}
export default Highlight
使用
import Highlight from 'path/to/Highlight.js'
Vue.use(Highlight)
一个vue 插件
https://github.com/gluons/vue-highlight.js
可以动态修改