Vue3.2实现代码高亮显示

安装依赖

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>

 效果展示