index.html中的代码块高亮展示：HTML技术博客开发-html教程-PHP中文网

hljs.highlightAll()不生效的主因是执行时机不当——仅扫描已存在DOM中的元素，且要求含language-xxx类或data-language属性；动态插入、缺语言标识、DOM未就绪、CSS未加载或语言包缺失均会导致失效。

index.html中的代码块高亮展示：html技术博客开发

用 `highlight.js` 加载后不生效，页面还是纯文本？

常见原因是 DOM 渲染顺序不对：代码块（如

<code>...</code>

）必须在 hljs.highlightAll() 执行前已存在于 DOM 中。若用 JS 动态插入代码块（比如 Markdown 渲染后才挂载），直接调 highlightAll() 会找不到目标。

实操建议：

Unreal Images

Unreal Images是一款提供免费 AI 生成图片、照片、艺术图和插画的图库网站。

下载

确保 <code class="html">...</code> 是静态 HTML 或在调用高亮前已渲染完成
若代码块是动态生成的，改用 hljs.highlightElement(codeEl) 逐个处理，codeEl 是具体的 元素
检查浏览器控制台是否报错 Cannot find language 'html' —— 需显式加载对应语言包，或使用完整版 build
确认 标签有 class="xxx"（如 language-html），否则 highlightAll() 默认跳过

`Prism.js` 在博客中插入 HTML 片段后样式错乱？

Prism 默认对 HTML 字符做转义（比如把

 显示成文字而非标签），但博客里常要展示可运行的 HTML 示例 —— 这时需区分「作为示例的 HTML 字符串」和「实际渲染的 HTML 结构」。实操建议：

展示 HTML 源码时，用  和 > 替换原始 />，再让 Prism 高亮 language-markup（Prism 推荐名）或 language-html

避免直接 innerHTML 插入未转义的 HTML 字符串，否则浏览器会提前解析，破坏代码块结构
如果用了 prismjs/plugins/autoloader，注意它默认只加载常用语言；HTML 支持需确认 components/prism-html.min.js 已加载
自定义主题 CSS 时，别覆盖 code[class*="language-"] 的 white-space: pre，否则换行和缩进会丢失

Vue / React 博客里用 highlight.js 怎么避免重复初始化？
单页应用（SPA）切换路由时，旧页面的代码块没销毁，新页面又调一次 highlightAll()，导致同一块被高亮两次，嵌套  层级变深、样式错位甚至报错。
实操建议：

在组件卸载前（Vue 的 onBeforeUnmount，React 的 useEffect cleanup）调用 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 的引用
手动写 <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 认可的标准，后者多数情况下被忽略。