标签本身不支持语法高亮，需配合css类名、包裹及html实体转义，或使用highlight.js等第三方库实现安全、正确的高亮效果。
code 标签本身不支持语法高亮
<code> 是纯语义化标签，只告诉浏览器“这段是代码”，不会自动着色、缩进或识别关键字。直接写 <code>print("hello") 渲染出来就是普通等宽字体，毫无高亮效果。
常见错误是以为加了 <code> 就能高亮，结果页面上 Python、JavaScript 代码全是一色黑字，关键词和字符串完全没区分。
真正起作用的是：CSS 样式 + 手动加 class，或者用第三方库（如 highlight.js）自动解析并注入 class。
手动加 class 配合 CSS 实现基础高亮
适合少量、静态、语言固定的代码片段。比如文档里嵌几个 console.log() 示例。
- 给
<code>加 language 类名：<code class="js">const x = 1; - 写对应 CSS 规则，比如用颜色区分
const（蓝色）、字符串（红色）、数字（橙色） - 注意：必须手动写 class，
<code lang="js">的lang属性对高亮无效，仅作语义标记 - 别漏掉
<pre class="brush:php;toolbar:false;"></pre>包裹——<code>默认不保留换行和空格，<pre class="brush:php;toolbar:false;"><code>...</code></pre>才能还原缩进
用 highlight.js 自动高亮（推荐入门方案）
它会扫描所有 <code class="xxx">，自动识别语法并插入带 class 的 span。
实操步骤很轻量：
- 在 HTML
中引入 CDN：<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css"> - 再加 JS：
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script> - 最后调用：
<script>hljs.highlightAll();</script> - 写代码时用
<pre class="brush:php;toolbar:false;"><code class="python">def f(): pass</code></pre>，class 名要和 highlight.js 支持的语言标识一致（比如language-python、language-bash）
不支持的 language 值（如 class="python" 缺少 language- 前缀）会导致完全不生效。
避免嵌套错位和 XSS 风险
用户提交的代码若直接插进 <code>，可能含未转义的 或 <code>&，导致 HTML 解析错乱甚至执行脚本。
- 服务端渲染时，务必对内容做 HTML 实体转义：
→ <code><，&→& - 前端动态插入时，别用
innerHTML直接写入原始字符串，改用textContent设置内容，再让 highlight.js 处理 <pre class="brush:php;toolbar:false;"><code></code> 里不要手动加 <code><span></span></code> 或其他标签——highlight.js 会自己生成，嵌套混用容易破坏结构</pre>
高亮不是加个 <code> 就完事，得兼顾语义、样式、安全三件事。最常被忽略的是转义——看着渲染正常，其实已经埋了 XSS 入口。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
