Vue3使用highlight.js进行代码高亮

安装依赖

• 需要安装两个依赖highlight.js、@highlightjs/vue-plugin

## 基础依赖
npm install --save highlight.js
## 支持vue3的依赖
npm install --save @highlightjs/vue-plugin

在main.js引入和注册highlight

• 引入需要引入：样式、依赖包、支持组件
• 在main主入口引入样式为全局统一都使用这个样式，也可以在单独的页面引入你想要的样式，样式效果参考官网：https://highlightjs.org/static/demo/
  更改 import ‘highlight.js/styles/atom-one-dark.css’, 把’atom-one-dark’改成官网提供的theme样式即可

// src/main.js 
import { createApp } from 'vue'
import App from './App.vue'
import 'highlight.js/styles/atom-one-dark.css' // 样式 
import 'highlight.js/lib/common' // 依赖包
import hljsVuePlugin from '@highlightjs/vue-plugin' // 支持vue3的组件

const app = createApp(App)
app.use(hljsVuePlugin) // 引入代码高亮，并进行全局注册
app.mount('#app')

使用高亮插件

// 把数据绑定到 `code` 属性
<highlightjs autodetect :code="highlightCode" />
// 或者直接将显示的代码写到 `code`中
<highlightjs language='javascript' code="console.log('test');" />

// 特别注意：代码中存在'<script></script>'时，需用反斜杠转义：'<script><\/script>'
// 使用language指定具体的语言，如javascript、xml，省略时highlightjs会自动识别对应的语言