vue项目如何实现代码高亮

vue项目如何实现代码高亮效果，下面web建站小编给大家详细介绍一下实现代码高亮代码！

1、安装脚手架

npm install highlight.js --save

2、在main.js引入

import hljs from 'highlight.js' //导入代码高亮文件
import 'highlight.js/styles/monokai-sublime.css'  //导入代码高亮样式

/自定义一个代码高亮指令
Vue.directive('highlight',function (el) {
  let highlight = el.querySelectorAll('pre code');
  highlight.forEach((block)=>{
    hljs.highlightBlock(block)
  })
})

3、在vue中引入

<div v-highlight>
//...
</div>