1. 安装Highlight.js
npm install highlight.js
2. Highlight.js基础使用
html中使用：界面效果
<template>
<div class="p-24">
<h2>代码高亮示例</h2>
<pre>
<code class="language-js" v-html="highlightedCode"></code></pre>
</div>
</template>
<script setup lang="ts">
import { watch, onMounted } from "vue";
import hljs from "highlight.js";
// 加载默认主题
import "highlight.js/styles/default.css";
const html = `
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>简单 HTML 文档</title>
</head>
<body>
<!-- 简单 HTML 文档 -->
<h1 id="welcome">欢迎来到我的网站</h1>
<p class="title">这是一个简单的 HTML 页面。</p>
<ul>
<li>项目 1</li>
<li>项目 2</li>
<li>项目 3</li>
</ul>
<img src="example.jpg" alt="示例图片" />
<footer>
<p> 2024 我的网站</p>
</footer>
</body>
</html>`;
const highlightedCode = hljs.highlight(html, { language: "html" }).value;
onMounted(() => {
// 高光全部
hljs.highlightAll();
});
</script>
<style scoped>
</style>
🔍查看Highlight.js支持的内置语言
3. 更改主题
在上述代码中添加以下的样式：
import "highlight.js/styles/dark.css";
import "highlight.js/styles/night-owl.css"
更多的内置主题可以参考如下的样式：
🔍Highlight.js 内置的主题样式
4. vue中使用Highlight.js
安装vue-plugin插件：
npm i @highlightjs/vue-plugin
本地使用组件：
<template>
<div class="p-24">
<hljsVuePlugin.component
language="html"
:code="html"
></hljsVuePlugin.component>
</div>
</template>
<script setup lang="ts">
import { onMounted } from "vue";
import hljs from "highlight.js";
import "highlight.js/styles/night-owl.css"
import hljsVuePlugin from "@highlightjs/vue-plugin";
const html = `<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>简单 HTML 文档</title>
</head>
<body>
<!-- 简单 HTML 文档 -->
<h1 id="welcome">欢迎来到我的网站</h1>
<p class="title">这是一个简单的 HTML 页面。</p>
<ul>
<li>项目 1</li>
<li>项目 2</li>
<li>项目 3</li>
</ul>
<img src="example.jpg" alt="示例图片" />
<footer>
<p> 2024 我的网站</p>
</footer>
</body>
</html>`;
</script>
<style scoped>
</style>
🔍 vue中json格式化显示（vue-json-viewer）
