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、效果展示