hljs.highlightAll()不生效的主因是执行时机不当——仅扫描已存在DOM中的元素，且要求含language-xxx类或data-language属性；动态插入、缺语言标识、DOM未就绪、CSS未加载或语言包缺失均会导致失效。
用 highlight.js 加载后不生效，页面还是纯文本？
常见原因是 DOM 渲染顺序不对：代码块（如 <pre class="brush:php;toolbar:false;"><code>...</code></pre>）必须在 hljs.highlightAll() 执行前已存在于 DOM 中。若用 JS 动态插入代码块（比如 Markdown 渲染后才挂载），直接调 highlightAll() 会找不到目标。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保
<pre class="brush:php;toolbar:false;"><code class="html">...</code></pre>是静态 HTML 或在调用高亮前已渲染完成 - 若代码块是动态生成的，改用
hljs.highlightElement(codeEl)逐个处理，codeEl是具体的<code>元素 - 检查浏览器控制台是否报错
Cannot find language 'html'—— 需显式加载对应语言包，或使用完整版 build - 确认
<code>标签有class="xxx"（如language-html），否则highlightAll()默认跳过
Prism.js 在博客中插入 HTML 片段后样式错乱？
Prism 默认对 HTML 字符做转义（比如把 <div> 显示成文字而非标签），但博客里常要展示可运行的 HTML 示例 —— 这时需区分「作为示例的 HTML 字符串」和「实际渲染的 HTML 结构」。
<p>实操建议：</p>
<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>
<li>展示 HTML 源码时，用 <code>< 和 > 替换原始 /<code>>，再让 Prism 高亮 language-markup（Prism 推荐名）或 language-html
prismjs/plugins/autoloader，注意它默认只加载常用语言；HTML 支持需确认 components/prism-html.min.js 已加载code[class*="language-"] 的 white-space: pre，否则换行和缩进会丢失Vue / React 博客里用 highlight.js 怎么避免重复初始化？
单页应用（SPA）切换路由时，旧页面的代码块没销毁，新页面又调一次 highlightAll()，导致同一块被高亮两次，嵌套 <span></span> 层级变深、样式错位甚至报错。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在组件卸载前（Vue 的
onBeforeUnmount，React 的useEffectcleanup）调用hljs.highlightElement前先清除已有高亮：el.innerHTML = el.textContent - 不要在全局入口反复调
highlightAll()；改用事件监听（如DOMContentLoaded或框架的 mounted 钩子）只执行一次 - 若用 Vue 的
v-html渲染 Markdown 输出，需在渲染后 nextTick 再调highlightElement，确保 DOM 更新完毕 - 注意 SSR 场景：服务端不执行高亮，客户端 hydrate 后需重新触发，但要避开服务端已有的高亮结果（可加 data 属性标记）
为什么 language-html 高亮里属性名没颜色，或者 <script></script> 里的 JS 不生效？
这是嵌套语言支持问题。标准 highlight.js 或 Prism 默认不自动解析 HTML 中的内联脚本或样式，需要显式启用插件或配置嵌套语言。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- highlight.js：引入
highlightjs-highlight.js插件，并注册嵌套语言，例如hljs.registerLanguage('javascript', jsLang)，再在 HTML 语言定义中指定contains: ['javascript', 'css'] - Prism：启用
plugins/autolinker和plugins/toolbar无用，真正需要的是components/prism-javascript.min.js+components/prism-css.min.js，并确保 HTML 语言模块包含language-javascript和language-css的引用 - 手动写
<code class="html"><script>console.log(1)</script>时，高亮器不会自动识别 script 内容为 JS —— 必须用<script class="javascript"></script>单独包裹才能触发 JS 高亮 - 部分构建工具（如 Vite）会压缩 HTML 字符串，把
class="html"误删或合并，检查最终输出的 index.html 源码是否保留了该 class
最易忽略的一点：所有高亮库都依赖代码块的 class 命名规范，language-html 和 lang-html 效果完全不同 —— 前者是 highlight.js/Prism 认可的标准，后者多数情况下被忽略。
