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


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

  1. 刚开始我是在入口文件main.js里面引入依赖，然后定义了指令
    这里我选的是tomorrow-night-eighties样式，文件里面还有其他样式可供选择,因为我的样式是基于scss，所以引入的是对应的scss样式，如果是css样式可以引入
1
import 'highlight.js/styles/tomorrow-night-eighties.css'
1
2
3
4
5
6
7
8
9
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)
  })
})
  1. 在需要代码高亮的页面使用，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 这些配置文件的语法
1
   <pre v-highlight><code v-html="scriptText" class="sql"></code></pre><p><center>[wp_ad_camp_2]</center></p>

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

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

1
2
3
4
5
6
7
8
9
  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)
    })
  }
1
<pre><code v-html="scriptText" class="sql"></code></pre><p><center>[wp_ad_camp_3]</center></p>

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

1
2
3
4
5
6
 mounted(){
      highlightCode()
    },
 updated(){
      highlightCode()
    },

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