标签本身不支持语法高亮，必须配合结构、正确language-前缀类名、html字符转义及高亮库js/css加载——缺一不可。
<code> 标签本身不支持语法高亮，它只负责语义声明和等宽字体渲染。真要高亮，必须配合 <pre class="brush:php;toolbar:false;"></pre> 结构、语言类名、转义处理和外部高亮库——漏掉任一环，颜色就出不来。
为什么单独 <code> 永远不会高亮
浏览器原生把 <code> 当作行内元素，自动压缩换行与多余空格；高亮库（如 highlight.js、Prism.js）默认只扫描 <pre class="brush:php;toolbar:false;"><code></code> 嵌套结构，因为只有 <code><pre class="brush:php;toolbar:false;"></pre> 能保留缩进和格式，而语法解析严重依赖这些信息。
-
<p><code class="js">const x = 1;
html-ppt-to-pdf
将使用 `` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。
下载
→ 完全被忽略，不触发任何解析
-
<div><code class="html"><div></div>
→ 即使有 class，也不匹配扫描规则
真正生效的唯一结构：<pre class="brush:php;toolbar:false;"><code class="js">const x = 1;</code></pre>
<pre class="brush:php;toolbar:false;"><code></code> 的 class 名必须写对</pre>
highlight.js 严格识别 language-xxx 或 lang-xxx 形式；Prism.js 略宽松，但统一用 language- 前缀最稳，避免跨库迁移问题。
- ✅ 正确：
class="html"、class="py"、class="bash"
- ❌ 无效：
class="html"、class="javascript"、class="js"、class="html5"
- 不确定语言时可用：
class="plaintext"，强制不着色但保格式
HTML 特殊字符不转义，代码块直接崩
把含 、<code>>、& 的原始代码直接塞进 <code>，浏览器会尝试解析为真实标签，轻则 DOM 错乱，重则执行脚本（比如 <script>alert(1)</script>）。
- 手动转义是底线：
→ <code><，> → >，& → &
- 更稳做法：用
<script type="text/plain"></script> 包住原始代码，再用 JS 读取 .textContent 插入 <pre class="brush:php;toolbar:false;"><code></code></pre>
- 服务端渲染（如 Next.js、Astro）建议构建时完成转义，别甩给客户端 JS 处理
高亮库加载时机和 CSS 缺一不可
常见“代码显示了但没颜色”，90% 是链路断在加载环节：DOM 还没生成就调了 highlightAll()，或只引了 JS 没引 CSS，或 CDN 地址拼错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
