code标签本身不支持彩色，需依赖highlight.js或prism.js等库解析语法并添加class，再通过css着色；必须用结构，且代码内容须html实体转义。
code标签本身不支持彩色，必须靠外部库或CSS手动控制
code 标签只是语义标记，浏览器默认只给它等宽字体和基础行高，没有任何颜色逻辑。所谓“彩色代码文本”，本质是给不同语法成分（如关键字、字符串、注释）加 class，再用 CSS 上色。这一步 code 自己完全不参与，得靠 highlight.js 或 Prism.js 这类库完成。
- 直接写
<code class="color-red">console.log()只能统一变红，无法区分console（函数名）和"log"（字符串） - 想让
const变蓝、"hello"变绿、// comment变灰——必须先解析语法结构，再打上对应 class - 纯 CSS 无法自动识别语法，除非你手动给每个 token 加 class，不现实
正确结构必须是 ，且 language-xxx 类名要写对
高亮库只扫描 <pre class="brush:php;toolbar:false;"><code class="js">...</code></pre> 这种结构。漏掉 <pre class="brush:php;toolbar:false;"></pre>，或者把 class 写成 class="javascript"，highlight.js 就直接跳过。
- ✅ 正确：
<pre class="brush:php;toolbar:false;"><code class="javascript">const x = 1;</code></pre> - ❌ 错误：
<code class="javascript">const x = 1;（没<pre class="brush:php;toolbar:false;"></pre>，不触发解析） - ❌ 错误：
<pre class="brush:php;toolbar:false;"><code class="js">const x = 1;</code></pre>（highlight.js不认缩写，必须language-js） - ⚠️ 注意：Prism.js 对 class 宽松些，
class="js"或class="js"都行；但别混用，保持项目统一
原始代码必须 HTML 实体转义，否则 DOM 会错乱
如果你在 <code> 里直接写 x 0，浏览器会把 当成标签起始，<code>& 当成字符实体前缀，轻则渲染空白，重则脚本执行或结构塌陷。
- 必须提前转义：
→ <code><，>→>，&→& - 不要依赖 JS 库自动转义——
highlight.js和Prism.js都不干这事，得你来 - 服务端渲染时用模板引擎（如 EJS、Nunjucks）的 escape 函数；前端动态插入时用
textContent赋值，或手写转义函数 - 错误示例：
<code>if (x→ 渲染后只剩if (x，后面全丢
自定义颜色要改 CSS，不是改 HTML 结构
高亮库生成的 HTML 类似这样：<code class="js"><span class="token keyword">const</span> <span class="token variable">x</span> = 1;。颜色由 CSS 控制，比如：
<pre class="brush:php;toolbar:false;">.token.keyword { color: #007acc; }
.token.string { color: #a31515; }
.token.comment { color: #008000; }
- 别试图在 HTML 里用
style="color:red" 覆盖——太难维护，且会被高亮库的 class 优先级压过 - 主题切换靠换 CSS 文件，不是换 class 名；官方主题（如
github.css、atom-one-dark.css）已预设好整套配色 - 如果用了
Prism.js，注意它的插件机制：行号、复制按钮等功能都依赖额外 CSS，漏了就显示异常
<pre class="brush:php;toolbar:false;"><code></code>，而是忘了转义 <code> 和 <code>&</code>，或者 class 名拼错一个字母导致整个块不生效——这两处一错，页面看起来就像没加高亮，但查起来毫无报错提示。</code></pre>前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
