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