安装依赖
npm install @highlightjs/vue-plugin highlight.js --save
全局注册引用
在main.ts中合适位置添加以下代码
import 'highlight.js/styles/atom-one-dark.css'
import 'highlight.js/lib/common'
import hljsVuePlugin from '@highlightjs/vue-plugin'
// 引入代码高亮,并进行全局注册
app.use(hljsVuePlugin)
组件使用
<template>
<highlightjs language='php' :code="code" />
</template>
<script setup lang="ts">
const code = 'echo "HelloWord";'
</script>
效果展示