vue中使用highlight.js实现代码高亮

最近忙着开发自己的开发脚手架，在做代码生成器的时候,有个预览功能，需要让代码高亮，于是在网上搜了一下，就看到了highlight.js,试了一下，感觉还是不错，这里记录一下,方便给需要的同学参考。

如果想了解更多请参考 highlight.js官方文档

第一步：安装依赖:

npm install highlight.js --save 或 yarn add highlight.js

第二步：在main.js中引入，官方为我们提供了vue到插件

import hljs from 'highlight.js'
import 'highlight.js/styles/idea.css'  //这里有多个样式，自己可以根据需要切换
Vue.use(hljs.vuePlugin);

第三：在组件中使用

  <div id="app">
    <!-- 可以使用自动检测 -->
    <highlightjs autodetect :code="function test(){}" />
    <!-- 也可以指定语言 -->
    <highlightjs language='javascript' code="var x = 5;" />
  </div>

ok,如果使用官方自带的插件就到这里可以了。

实际项目中的效果： image.png

第四步: highlightjs 扩展(自定义插件)
可以参考:https://www.cnblogs.com/Jimc/p/13161836.html

总结:
具体内容就介绍到这里，因为比较简单，就不用过多废话，直接按套路走就ok了。有什么问题欢迎留言，喜欢我的文章记得关注就好😊!