vue3使用代码高亮highlightjs

官网:

添加依赖

pnpm add highlight.js -S   
pnpm add @highlightjs/vue-plugin -S

在package.json中就添加了

    "@highlightjs/vue-plugin": "^2.1.0",
    "highlight.js": "^11.9.0",

添加css样式

我在main.js全局添加的

import 'highlight.js/styles/atom-one-dark.css'; //代码高亮样式
在styles中有很多样式

页面单独引用

<script>
import 'highlight.js/lib/common';
import hljsVuePlugin from "@highlightjs/vue-plugin";
export default {
  components: {
    highlightjs: hljsVuePlugin.component
  },
  。。。。。。
  }
</script>

使用

<highlightjs language="sql" :code="sqlData"></highlightjs>