prism.js仅高亮嵌套结构，class需用language-前缀且大小写敏感；css须在js前加载，js应置于前；python等语言需额外引入对应模块；行号与复制按钮需配齐js/css及line-numbers类；动态代码须手动调用prism.highlightelement()。
pre > code 结构不写对，Prism 一毛钱效果都没有
Prism.js 不扫描 code 标签本身，只认 pre 包裹 code 的嵌套结构。直接写 <code class="js">console.log(1)，哪怕 class 名完全正确，也绝不会高亮。
必须写成：
<pre class="brush:php;toolbar:false;"><code class="javascript">
function foo() {
return 'bar';
}
</code>
注意三点：
-
class值推荐用language-javascript这种带language-前缀的写法（兼容性更好），js或javascript单独写在某些版本里可能 fallback 成纯文本 -
pre和code必须是父子关系，中间不能插div、span等其他标签 - HTML 中 class 属性值大小写敏感：
language-HTML≠language-html，后者才有效
引入 prism.css 和 prism.js 的顺序和时机很关键
样式必须在脚本执行前加载完成，否则高亮后元素可能错位、token 没颜色；脚本又必须等 DOM 就绪后运行，否则找不到 pre > code 元素。
最稳妥的做法是：
- 把
<link rel="stylesheet" href="prism.css">放在里 - 把
<script src="prism.js"></script>放在前（即页面底部） - 不手动调
Prism.highlightAll()—— 因为 prism.js 默认会在DOMContentLoaded时自动执行它，前提是此时pre > code已在 DOM 中
如果非得把 script 放 里，就得包一层：
document.addEventListener('DOMContentLoaded', () => {
Prism.highlightAll();
});
Python/Java/Go 等语言高亮失效？不是 bug，是没加语言模块
Prism 默认只内置 HTML、CSS、JavaScript 三种语言解析器。写 class="python" 却显示为黑白文本，99% 是因为没加载 prism-python.js。
解决方式有两种：
- 下载完整版：去 prismjs.com/download.html 勾选 Python、JSON、Bash 等需要的语言，下载
prism.js和prism.css替换本地文件 - 按需引入（推荐）：保留基础
prism.js，再额外加载对应语言文件，例如：<script src="components/prism-python.min.js"></script>
注意：CSS 文件也得同步支持对应语言的 class 规则，否则 keyword、string 等 token 没样式
行号 + 复制按钮一起用，光加 JS 不够，CSS 和 class 都得配齐
这两个功能不是开箱即用的，它们依赖插件，且有明确的 HTML 结构和样式要求。
要让行号和复制按钮同时生效，必须同时满足：
- 引入三个 JS：
prism.js+prism-line-numbers.min.js+prism-copy-to-clipboard.min.js（后者会自动加载prism-toolbar.min.js） - 引入两个 CSS：
prism.css+prism-line-numbers.css（缺这个，行号区域会压住代码） -
pre标签上加class="line-numbers"（不是加在code上） - 确保没有其他 CSS 把
.toolbar或.line-numbers-rows给 display: none 了
示例结构：
<pre class="line-numbers"><code class="js">console.log('hello');</code>
动态内容（比如 Markdown 渲染后插入的代码块）永远是最大陷阱：Prism 不监听 DOM 变更，你得自己在渲染完成后调 Prism.highlightElement(codeEl)，传入那个刚插入的 code 元素。漏掉这步，再完美的配置也白搭。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
