首先,您需要在项目中安装 highlight.js,可以使用 npm 或 yarn 进行安装。
其次,在main.js中引入highlight.js,并调用它的 highlightAll() 方法,如下:
import hljs from 'highlight.js'
import 'highlight.js/styles/atom-one-dark.css'
Vue.directive('highlightjs', {
deep: true,
bind: function (el, binding) {
// on first bind, highlight all targets
let targets = el.querySelectorAll('code')
targets.forEach((target) => {
// if a value is directly assigned to the directive, use this
// instead of the element content.
if (binding.value) {
target.textContent = binding.value
}
hljs.highlightBlock(target)
})
},
componentUpdated: function (el, binding) {
// after an update, re-fill the content and then highlight
let targets = el.querySelectorAll('code')
targets.forEach((target) => {
if (binding.value) {
target.textContent = binding.value
hljs.highlightBlock(target)
}
})
}
})