[JavaScript知识库] vue3使用highlightjs代码高亮器，简单明了附带效果图

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> vue3使用highlightjs代码高亮器，简单明了附带效果图 -> 正文阅读

[JavaScript知识库]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传送门