单独用 标签不会触发语法高亮，因 highlight.js 和 prism.js 默认忽略非 结构；真要高亮单行代码，须用 hljs.highlightelement(el) 显式处理且 el 必须是带 language-* 类的 元素。
单独用 标签根本不会触发语法高亮
很多人以为给 加个 <code>class="js" 就能高亮，结果全是黑字白底——因为 highlight.js 和 Prism.js 都默认忽略所有非 <pre class="brush:php;toolbar:false;"><pre class="brush:php;toolbar:false;"> 结构的节点。<code> 单独存在时只是行内等宽文本，没有换行保留、没有语义上下文、库压根不扫描它。</code></pre></pre>
- 错误写法：
<p>调用 <code class="js">fetch()时... → 浏览器渲染正常，但高亮库完全跳过 - 正确做法：只用于纯展示目的（如函数名、命令），不依赖颜色区分；真要高亮，必须套
或手动调 API
- 如果非要高亮单行代码，得用
hljs.highlightElement(el)显式处理，且el必须是<code>元素，class 得是language-js这类合法值
hljs.highlightElement() 是唯一支持局部高亮的函数
当页面里只有零星几处
标签需要着色（比如文档中穿插的命令、API 名），又不想包裹 <pre class="brush:php;toolbar:false;"> 破坏段落流，就得放弃自动扫描，改用手动标记。
- 必须确保目标元素已挂载到 DOM，且 class 正确，例如：
<code class="bash">npm install -D vite - 调用前确认 JS 已加载完成：
hljs.highlightElement(document.querySelector('code.language-bash')) - 别传错节点：传
<p></p>或<span></span>会报错；传没 class 的<code>则静默失败 - 多次调用同一元素不会重复加 class，但若内容变更（如 Vue 响应式更新），需重新调用
动态插入的 标签容易漏掉高亮时机
Markdown 渲染器、Vue 组件、fetch 回来的内容，常在初始 DOM 就绪后才插入 节点。此时 <code>hljs.highlightAll() 已执行完毕，新节点不会被自动捕获。
- 典型场景：Vue 中
v-html渲染含<code class="py">print("hello")的字符串 - 解决方式不是重跑
highlightAll()（可能重复处理旧节点），而是监听插入完成事件后，精确查找并调用highlightElement() - 安全起见，建议加个防抖或节流：DOM 变化频繁时，等 50ms 再批量处理新增的
code.language-*元素 - 服务端渲染（如 Next.js）下，客户端首次 hydrate 后也要检查是否已有未高亮的
，避免 SSR 和 CSR 不一致
HTML 特殊字符不转义会导致 DOM 解析崩溃
哪怕只写一个 x 在 <code> 标签里，<code> 也会被浏览器当成标签开始符，后续结构全乱——这不是高亮失效，是 HTML 解析直接出错。
- 必须转义三类字符：
→ <code>，<code>>→>，&→&（注意&要写两次，否则第一次解码就变回&） - 服务端生成 HTML 时，用
htmlspecialchars()类函数；前端拼接时，用document.createTextNode().textContent替代innerHTML - 最稳方案：把原始代码塞进
<script type="text/plain"></script>，再读.textContent插入，彻底绕过解析阶段 - 别信“CSS 能补救”——样式再好也救不了被截断的 DOM 树
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
