Vue中如何实现代码高亮功能？

​目录​

​​1、下载依赖​​

​​ 2、在main.js文件中导入包​​

​​3、同样是在main.js文件中自定义一个指令​​

​​4、在vue文件中使用指令​​

​​5、效果展示​​

1、下载依赖

npm install highlight.js --save

 2、在main.js文件中导入包

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

3、同样是在main.js文件中自定义一个指令

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

4、在vue文件中使用指令

<div>
        <div id="content">
          <div v-html="article.content" v-highlight></div>
        </div>
 </div>

5、效果展示