vue3使用highlightjs代码高亮器，简单明了附带效果图

需要安装两个依赖

npm install --save highlight.js

npm install --save @highlightjs/vue-plugin

页面上单独引入插件，不要直接在main.ts全局引入
注意：因为插件不支持响应式数据，所以不要使用ref定义响应式变量

<template>
    <highlightjs
        autodetect
        :code="jsonCode"
    />
</template>

<script>
import 'highlight.js/styles/stackoverflow-light.css';// 可以切换其它样式风格，例如黑色主题
import 'highlight.js/lib/common';
import hljsVuePlugin from "@highlightjs/vue-plugin";

export default {
    setup() {
        const jsonStr = [
            { 'name': 'JSON', 'address': '北京市西城区', 'age': 25 }, 
            { 'name': 'JSON', 'address': '北京市西城区', 'age': 25 }
        ];
        let jsonCode = JSON.stringify(jsonStr, null, 2); // 设置tab为两个空格

        return {
          jsonCode,
        };
    },
    components: {
        highlightjs: hljsVuePlugin.component
    }
}
</script>

github传送门