vue项目中如何设置highlight.js的CSS文件

在 Vue 项目中使用 highlight.js，首先需要安装 highlight.js：

npm install highlight.js --save

然后在 main.js 中引入：

import hljs from 'highlight.js'
import 'highlight.js/styles/github.css'
Vue.directive('highlightjs', {
  deep: true,
  bind: function (el, binding) {
    let targets = el.querySelectorAll('code')
    targets.forEach((target) => {
        hljs.highlightBlock(target)
    })
  },
  componentUpdated: function (el, binding) {
    let targets = el.querySelectorAll('code')
    targets.forEach((target) => {
        hljs.highlightBlock(target)
    })
  }
})

然后在需要高亮的代码块外面加上 v-highlightjs 指令即可。

<template>
  <div>
    <pre v-highlightjs>
      <code class="html">
        <!-- 代码块 -->
      </code>
    </pre>
  </div>
</template>

注意，上面的代码中我们使用的是 'highlight.js/styles/github.css'，你也可以使用其它的 css 样式。