在vue中使用highlight.js代码高亮

最新推荐文章于 2024-10-17 14:48:43 发布

亚崽崽

最新推荐文章于 2024-10-17 14:48:43 发布

阅读量6.8k

点赞数 2

CC 4.0 BY-SA版权

文章标签： vue vue.js

本文链接：https://blog.youkuaiyun.com/qq_42972625/article/details/106116958

本文介绍了在Vue项目中利用highlight.js进行代码高亮的方法，详细阐述了如何在main.js中引入和定义指令，以及在不同组件中应用。针对在弹窗中动态显示代码高亮的问题，提出了在组件的mounted和updated生命周期钩子中调用highlightCode()的解决方案，以确保每次弹窗打开时代码始终保持高亮状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在vue中使用highlight让代码实现高亮
highlight官网（查看配色）：https://highlightjs.org
在这里插入图片描述
highlight查看api地址：https://highlightjs.readthedocs.io

刚开始我是在入口文件main.js里面引入依赖，然后定义了指令
这里我选的是tomorrow-night-eighties样式，文件里面还有其他样式可供选择,因为我的样式是基于scss，所以引入的是对应的scss样式，如果是css样式可以引入

import 'highlight.js/styles/tomorrow-night-eighties.css'

import hljs from 'highlight.js'
import 'highlight.js/scss/tomorrow-night-eighties.scss'
Vue.directive('highlight',function (el) {
  hljs.configure({useBR: true});
  let blocks = el.querySelectorAll('pre code');
  blocks.forEach((block) => {
    hljs.highlightBlock(block)
  })
})

在需要代码高亮的页面使用，v-highlight就是在main.js自定义的highlight指令，v-html里面就是需要动态渲染的代码，class是指高亮的代码语言，这里我指定的是sql语句，highlight.js 支持几十种种编程语言（https://highlightjs.org/download），既包括常见的 C、java、java、javascript、ruby、python、html、css、sql等，还支持 apache、nginx 这些配置文件的语法

   <pre v-highlight><code v-html="scriptText" class="sql"></code></pre>

3.然后页面就实现了代码高亮。
在这里插入图片描述
但是关键问题是，这个代码高亮页面是点击按钮以后的弹窗，当我点击第一次的时候代码是高亮的，但是当我关闭弹窗以后在点击这个代码它有的时候高亮，有的时候没有效果，然后查阅说是要使用hljs.initHighlighting()手动高亮，然后我也加了，但是还是没有实现，所以这种方法适合页面加载时就显示代码高亮的页面，对于我这种要点击实现代码高亮的页面不是很理想

重点来了（解决办法）
在需要代码高亮的页面引入highlight

  import hljs from 'highlight.js'
  import 'highlight.js/scss/tomorrow-night-eighties.scss'
  const highlightCode = () => {
    const block = document.querySelectorAll('pre code')
    hljs.configure({useBR: true});
    block.forEach((el) => {
      hljs.highlightBlock(el)
    })
  }

<pre><code v-html="scriptText" class="sql"></code></pre>

在vue中的mounted和updated生命周期里面调用highlightCode（），这样的话不论点击几次按钮，代码始终高亮，而不会出现上面那种情况

 mounted(){
      highlightCode()
    },
 updated(){
      highlightCode()
    },

这个是我在vue中使用highlight遇到的问题，有错误之处希望大家多多指教