不能只用手动加颜色做语法高亮，因浏览器不识别代码语义（如if关键字、"hello"字符串），仅作普通文本渲染，且空格缩进易致复制乱码，HTML特殊字符需转义。
为什么不能只用 和 <span> 做语法高亮</H3>
<p>直接用 <pre class="brush:php;toolbar:false;"> 包 <span> 手动加颜色，看似自由，实则绕开了解析逻辑，容易出错。浏览器不会识别 <span class="keyword">if</span> 是关键字，<span class="string">"hello"</span> 是字符串——它只当普通文本渲染。更麻烦的是：换行缩进靠空格维持，但用户复制时可能粘贴成乱码；HTML 特殊字符（如 <code><</code>、<code>&</code>）不转义会破坏 DOM；不同语言的语法规则（比如 JS 的模板字符串、Python 的缩进块）无法自动适配。</p>
<H3>正确做法是 <pre class="brush:php;toolbar:false;"><pre class="brush:php;toolbar:false;"> 嵌套 + 高亮库驱动</H3>
<p>所有主流高亮方案（Prism.js、highlight.js）都依赖 <code><pre class="brush:php;toolbar:false;"><code>
结构作为入口点，<span></span> 标签只是它们内部生成的中间产物，你不该手动写。
- 必须把原始代码放在
<pre class="brush:php;toolbar:false;"><code></code> 里，且 <code><code></code> 要带语言类名，例如 <code>class="js"</code> 或 <code>class="js"</code></code></pre>
- HTML 特殊字符必须提前转义：
→ <code>，<code>> → >，& → &
- 缩进统一用空格（别用 Tab），否则 Prism.js 可能误判缩进层级
- 引入 Prism.js 时，至少要加载 core + 对应语言模块，比如 JS 需要
prism-core.min.js 和 prism-javascript.min.js
手动插入 的唯一合理场景
<pre class="brush:php;toolbar:false;"><code></code> 里，且 <code><code></code> 要带语言类名，例如 <code>class="js"</code> 或 <code>class="js"</code></code></pre>
→ <code>，<code>> → >，& → &
prism-core.min.js 和 prism-javascript.min.js
仅限极简静态页、无构建流程、也不引入任何 JS 库时的“伪高亮”——但仅适用于单语言、固定内容、且你愿意自己维护正则和 class 名。
- 先对代码字符串做 HTML 实体转义，再用正则匹配关键词（如
/\b(function|return|const)\b/g），包裹成<span class="keyword">$1</span> - 必须用
textContent插入到<code>内，避免二次解析；不能用innerHTML直接塞带<span></span>的字符串到<pre class="brush:php;toolbar:false;"></pre>里，否则<span></span>会被浏览器当作真实标签解析 - 这种写法无法支持嵌套结构（如 JSX 中的 HTML 标签）、注释高亮或字符串内插值，维护成本远高于引入一个 CDN 链接
常见错误导致 不生效
即使用了 Prism.js， 也常不出现，根本原因往往不在 CSS，而在结构或数据层面：
-
<pre class="brush:php;toolbar:false;"></pre>里直接写了未转义的<div>，导致浏览器提前闭合标签，后续 <code><code>根本没被解析出来 <code>缺少 language 类名，Prism.js 默认跳过处理（可加data-language="js"作为 fallback）- JS 文件加载顺序错误：Prism.js 在 DOM 渲染前执行，但
<pre class="brush:php;toolbar:false;"><code></code> 尚未插入文档</pre> - CSS 里写了
span { color: red }却没限定作用域，把页面所有<span></span>都染红了
真正可靠的高亮，从来不是靠手写 ，而是让 <pre class="brush:php;toolbar:false;"><code></code> 成为输入，让 Prism.js 或 highlight.js 成为黑盒处理器——你只管喂干净数据，剩下的交给它。</pre>
