Vue中实现Prism代码高亮需引入样式与JS、使用结构、在onMounted/onUpdated中调用Prism.highlightAll()，并按需引入插件。

在 Vue 模板中实现代码高亮，核心是让 Prism.js 正确识别并处理 <pre class="brush:php;toolbar:false;">&lt;code&gt;&lt;/code&gt; 结构中的原始代码字符串。关键不在“写模板”，而在“触发高亮”和“确保样式/语言支持到位”。下面按真实开发流程分步说明。&lt;/p&gt; &lt;H3&gt;引入 Prism 样式与基础 JS&lt;/H3&gt; &lt;p&gt;必须显式加载主题 CSS 和 Prism 主库，否则只有 HTML 结构、没有颜色和语法解析：&lt;/p&gt; &lt;ul&gt; &lt;li&gt;在组件的 &lt;code&gt;&lt;style&gt;&lt;/code&gt; 块中用 &lt;code&gt;@import&lt;/code&gt; 引入主题（如 &lt;code&gt;prism-tomorrow.css&lt;/code&gt;），或全局注入到 &lt;code&gt;main.js&lt;/code&gt;&lt;/li&gt; &lt;li&gt;在组件脚本中 &lt;code&gt;import Prism from 'prismjs'&lt;/code&gt; —— 注意不是默认导出，需确认包导出方式（Vue 3 推荐用具名导入）&lt;/li&gt; &lt;li&gt;若只用常见语言（js/ts/html/css），可跳过手动注册；如需 Python、Rust 等，要额外 &lt;code&gt;import 'prismjs/components/prism-python'&lt;/code&gt;&lt;/li&gt; &lt;/ul&gt; &lt;H3&gt;模板结构与 class 命名规范&lt;/H3&gt; &lt;p&gt;&lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt; 包裹 &lt;code&gt;&lt;code&gt;&lt;/code&gt; 是必须的语义结构，且 class 必须带 &lt;code&gt;language-xxx&lt;/code&gt; 前缀：&lt;/p&gt;&lt;div class=&quot;aritcle_card flexRow&quot;&gt; &lt;div class=&quot;artcardd flexRow&quot;&gt; &lt;a class=&quot;aritcle_card_img&quot; href=&quot;/xiazai/skill10385&quot; title=&quot;Vue Wrap&quot;&gt;&lt;img src=&quot;https://img.php.cn/upload/skill/001/246/273/6adaf20d3191a227.jpg&quot; alt=&quot;Vue Wrap&quot; &gt;&lt;/a&gt; &lt;div class=&quot;aritcle_card_info flexColumn&quot;&gt; &lt;a href=&quot;/xiazai/skill10385&quot; title=&quot;Vue Wrap&quot;&gt;Vue Wrap&lt;/a&gt; &lt;p&gt;Vue 入门指南 — JavaScript 框架&lt;/p&gt; &lt;/div&gt; &lt;a href=&quot;/xiazai/skill10385&quot; title=&quot;Vue Wrap&quot; class=&quot;aritcle_card_btn flexRow flexcenter&quot;&gt;&lt;b&gt;&lt;/b&gt;&lt;span&gt;下载&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;ul&gt; &lt;li&gt;正确写法：&lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;code class=&quot;javascript&quot;&gt;{{ rawCode }}&lt;/code&gt;</pre>

错误写法：<div class="js">...</div>（Prism 不识别）、<code class="js">（缺 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，<code> 上加 line-numbers 类
• 右上角复制按钮：引入 prism-copy-to-clipboard.min.js，无需额外 class，自动生效
• 显示语言标签：引入 prism-show-language.min.js，class 加 show-language
• Vite 用户推荐用 vite-plugin-prismjs，可自动按需打包语言和插件，减少体积