prism.js代码高亮不生效的常见现象是内容原样显示无颜色，根本原因是加载时机不当或动态插入后未手动触发高亮，需确保highlightall()在dom就绪后执行，或对新增元素调用highlightelement()。
Prism.js 加载时机不对导致代码块不渲染
常见现象是页面加载后 <pre class="brush:php;toolbar:false;"><code class="js"></code> 标签内容原样显示，没高亮。根本原因是 Prism.js 在 DOM 渲染完成前就执行了，或者在编辑器动态插入代码块后没手动触发高亮。</pre>
实操建议：
- 确保
Prism.highlightAll()在所有代码块已写入 DOM 后调用；若用富文本编辑器（如 TinyMCE、Quill）或 React/Vue 动态渲染，不能依赖初始加载时的自动调用 - 对编辑器中新增的代码块，需在插入后立即调用
Prism.highlightElement(codeEl)，其中codeEl是新创建的<code>元素 - 避免重复调用
highlightAll()，它会遍历全部code标签，可能造成性能抖动，尤其在长文档中
编辑器输出 HTML 时 language-xxx 类丢失或拼写错误
很多编辑器（比如 Markdown 解析器或所见即所得工具）默认不保留或自动修正 class 属性，导致 class="python" 被删成 class="python"，或被转义为 class="undefined"，Prism.js 就无法匹配对应语言插件。
实操建议：
- 检查编辑器导出的 HTML 源码，确认
<code>标签上存在形如language-xxx的 class，且xxx是 Prism 支持的语言标识（如javascript、bash、json，不是js或py） - 若用 Markdown 渲染，确认解析器（如 marked、remark）配置了
langPrefix: 'language-'（这是 Prism 默认前缀），否则要同步修改 Prism 配置：Prism.languages['language-js'] = Prism.languages.javascript这类映射不推荐，容易断裂 - 服务端渲染或静态生成时，可加一层校验逻辑：对每个
code元素，若className不含language-前缀，则自动补全（例如从class="js"改为class="javascript"）
自定义语言或行号插件与编辑器共存时样式冲突
启用 prism-line-numbers 或 prism-toolbar 后，编辑器容器内的滚动、定位、CSS 优先级常导致行号错位、复制按钮不可点，甚至整个代码块塌陷。
实操建议：
- 给编辑器内容区域加独立 CSS scope，例如用属性选择器限定作用域：
[data-editor-content] .token { ... }，避免 Prism 全局样式污染编辑器 UI - 行号插件依赖
pre元素的position: relative，而某些编辑器（如 CKEditor 5）会给pre加display: block但忽略定位上下文，需手动补上position: relative - 禁用编辑器对
code和pre的默认样式重置（如margin: 0; white-space: pre），否则 Prism 的line-height和tab-size可能失效
动态切换主题时编辑器内代码块未响应
Prism 主题本质是 CSS 文件，但编辑器内容常被包裹在 iframe 或 Shadow DOM 中，外部 link 标签加载的主题 CSS 无法穿透作用域。
实操建议：
- 若编辑器使用
iframe（如 CodeMirror 5 的 preview 模式），需把主题 CSS 内联注入到 iframe 的head中，而不是只放在父页面 - 若用 Shadow DOM（如 Lit、Stencil 组件），需将 Prism 主题 CSS 作为
:host样式的一部分，或使用adoptedStyleSheets显式挂载 - 避免用 JS 动态改
document.body.className切换主题——Prism 不监听该变化，得配合Prism.plugins.NormalizeWhitespace.setDefaults()或重新调用highlightAll()
language-xxx，而你只盯着 JS 控制台有没有报错。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
