代码高亮插件highlight的使用

npm install --save highlight.js
 
npm install --save @highlightjs/vue-plugin

<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>