Vue中实现Prism代码高亮需引入样式与JS、使用结构、在onMounted/onUpdated中调用Prism.highlightAll()，并按需引入插件。
在 Vue 模板中实现代码高亮，核心是让 Prism.js 正确识别并处理 <code></code> 结构中的原始代码字符串。关键不在“写模板”，而在“触发高亮”和“确保样式/语言支持到位”。下面按真实开发流程分步说明。
引入 Prism 样式与基础 JS
必须显式加载主题 CSS 和 Prism 主库，否则只有 HTML 结构、没有颜色和语法解析：
- 在组件的
块中用@import引入主题（如prism-tomorrow.css），或全局注入到main.js - 在组件脚本中
import Prism from 'prismjs'—— 注意不是默认导出，需确认包导出方式（Vue 3 推荐用具名导入） - 若只用常见语言（js/ts/html/css），可跳过手动注册；如需 Python、Rust 等，要额外
import 'prismjs/components/prism-python'
模板结构与 class 命名规范
包裹 是必须的语义结构，且 class 必须带 language-xxx 前缀：
- 正确写法：
<code class="javascript">{{ rawCode }}</code> - 错误写法：
（缺language-前缀） - 语言标识要准确：用
language-typescript而非language-ts，否则高亮失效
手动触发高亮与响应式更新
Vue 的响应式机制不会自动重跑 Prism，必须在 DOM 渲染后主动调用：
- 首次渲染：在
onMounted（Vue 3）或mounted（Vue 2）中执行Prism.highlightAll() - 内容动态变更（如切换代码片段）：在
onUpdated或watch回调里再次调用Prism.highlightAll() - 若使用
v-html插入代码，务必加this.$nextTick(() => Prism.highlightAll())（Vue 2）或nextTick(() => Prism.highlightAll())（Vue 3）
增强体验：行号、复制按钮等插件
Prism 插件需单独引入 JS + CSS，并在 HTML 中添加对应 class：
- 显示行号：引入
prism-line-numbers.min.js和prism-line-numbers.min.css，上加line-numbers类 - 右上角复制按钮：引入
prism-copy-to-clipboard.min.js，无需额外 class，自动生效 - 显示语言标签：引入
prism-show-language.min.js，class 加show-language - Vite 用户推荐用
vite-plugin-prismjs，可自动按需打包语言和插件，减少体积
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
