在 Vue 3(组合式API)项目中使用 Prism可以采取在线CDN引入的方式，我这里选择用npm安装，在项目根目录执行安装命令npm install prismjs即可。
接着在src/component/目录下创建一个组件，示例如下：
<script setup>
import { onMounted, ref, watch } from 'vue';
// 导入 Prism 核心模块
import Prism from 'prismjs';
// 导入 Prism 主题 CSS（更换颜色只需替换主题名）
import 'prismjs/themes/prism-tomorrow.min.css';
// 导入需要高亮的语言组件
import 'prismjs/components/prism-markup.min.js'; // HTML（markup 包含 HTML/XML）
import 'prismjs/components/prism-css.min.js'; // CSS
import 'prismjs/components/prism-javascript.min.js'; // JS
import 'prismjs/components/prism-typescript.min.js'; // TS（依赖 JS 组件，需后置导入）
// 需要高亮的代码内容
const htmlCode = ref(`
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Vue + Prism 示例</title>
</head>
<body>
<div id="app" class="container"></div>
</body>
</html>
`);
const cssCode = ref(`
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
}
#app {
color: #333;
font-size: 16px;
}
`);
const jsCode = ref(`
function greet(name) {
return \`Hello, \${name}!\`;
}
const app = document.getElementById('app');
if (app) {
app.innerText = greet('Prism');
}
`);
const tsCode = ref(`
// TypeScript 类型定义 + 函数
interface User {
name: string;
age: number;
}
function getUserInfo(user: User): string {
return \`\${user.name} 的年龄是 \${user.age} 岁\`;
}
const user: User = { name: '张三', age: 25 };
console.log(getUserInfo(user)); // 输出：张三 的年龄是 25 岁
`);
// 初始化代码高亮（组件挂载后执行）
const initPrismHighlight = () => {
Prism.highlightAll(); // 高亮页面中所有带 language-xxx 类的代码块
};
// Vue3 挂载钩子
onMounted(() => {
initPrismHighlight();
});
// 可选:如果代码内容是动态的，监听数据变化重新高亮
watch([htmlCode, cssCode, jsCode, tsCode], () => {
// 延迟执行，确保 DOM 更新完成
setTimeout(() => initPrismHighlight(), 0);
});
</script>
<template>
<div class="code-highlight-container">
<!-- HTML 代码高亮 -->
<div class="code-block">
<h4>HTML 示例</h4>
<pre v-pre> <!-- v-pre 避免 Vue 解析 HTML 标签 -->
<code class="language-html">{{ htmlCode }}</code>
</pre>
</div>
<!-- CSS 代码高亮 -->
<div class="code-block">
<h4>CSS 示例</h4>
<pre v-pre>
<code class="language-css">{{ cssCode }}</code>
</pre>
</div>
<!-- JavaScript 代码高亮 -->
<div class="code-block">
<h4>JavaScript 示例</h4>
<pre v-pre>
<code class="language-javascript">{{ jsCode }}</code>
</pre>
</div>
<!-- TypeScript 代码高亮 -->
<div class="code-block">
<h4>TypeScript 示例</h4>
<pre v-pre>
<code class="language-typescript">{{ tsCode }}</code>
</pre>
</div>
</div>
</template>
<style scoped>
/* 可选：自定义代码块样式（比如内边距、圆角） */
.code-block {
margin: 20px 0;
}
pre {
padding: 16px;
border-radius: 8px;
overflow-x: auto; /* 处理长代码横向滚动 */
}
</style>需要注意几个点：TS 组件（prism-typescript.min.js）依赖 JS 组件，必须在导入 prism-javascript.min.js 之后导入；
<code> 的 class 要写 language-typescript（简写 language-ts 也可以）；
必须给 <pre> 加 v-pre 指令，避免 Vue 解析 HTML 标签（比如 <div> 会被当成真实dom元素）；
此外，如果想更改Prism高亮颜色，只需替换导入的 CSS 文件路径，比如换成浅色主题：
// 替换为默认浅色主题
import 'prismjs/themes/prism.min.css';
// 替换为 Solarized Light 暖色调
import 'prismjs/themes/prism-solarizedlight.min.css';
