在vue中使用highlight.js

首先，您需要在项目中安装 highlight.js，可以使用 npm 或 yarn 进行安装。

其次，在main.js中引入highlight.js，并调用它的 highlightAll() 方法，如下：

import hljs from 'highlight.js'
import 'highlight.js/styles/atom-one-dark.css'
Vue.directive('highlightjs', {
  deep: true,
  bind: function (el, binding) {
    // on first bind, highlight all targets
    let targets = el.querySelectorAll('code')
    targets.forEach((target) => {
      // if a value is directly assigned to the directive, use this
      // instead of the element content.
      if (binding.value) {
        target.textContent = binding.value
      }
      hljs.highlightBlock(target)
    })
  },
  componentUpdated: function (el, binding) {
    // after an update, re-fill the content and then highlight
    let targets = el.querySelectorAll('code')
    targets.forEach((target) => {
      if (binding.value) {
        target.textContent = binding.value
        hljs.highlightBlock(target)
      }
    })
  }
})

最后，在使用 v-highlightjs 指令时，使用 <code> 标签将要高亮的代码包裹起来，如下：

<template>
  <div>
    <pre v-highlightjs>
      <code>
        {{ yourCodeHere }}
      </code>
    </pre>
  </div>
</template>

这样就可以在vue中使用highlight.js了