pre标签内代码高亮失效的五大原因：class未正确加在pre上、code标签位置错误导致dom自动修正、未转义html特殊字符、pre标签缩进引入多余空格、语义缺失影响可访问性与seo。
pre标签里直接写但class没加在<code>上</code>
高亮库（比如highlight.js）只认上的class，不是<code>的父元素。你把class="js"写在<pre class="brush:php;toolbar:false;">上，等于没写——代码块会显示，但永远是黑白底色。</pre>
常见错误现象：页面有代码块，但没颜色；浏览器开发者工具里能看到标签存在，但class属性为空或缺失。
- ✅ 正确写法：
function f() { return 1; } - ❌ 错误写法：
<code>function f() { return 1; }</code> - ⚠️ Prism.js 对 class 宽松些，
也能识别；highlight.js 必须用 language-javascript 或 javascript（取决于版本）
把写在<pre class="brush:php;toolbar:false;">外面或顺序颠倒</pre>
写成<pre class="brush:php;toolbar:false;">...</pre>看似只是标签顺序调换，实际会触发浏览器 DOM 自动修正：解析器会把<pre class="brush:php;toolbar:false;">踢出，<pre class="brush:php;toolbar:false;">变成孤立块级元素。结果是缩进保留了，但语义丢失、高亮不触发、屏幕阅读器读作“预格式化文本”而非“Python 代码”。</pre></pre>
常见错误现象：复制粘贴时首行多出几个空格；代码块在移动端错位；SEO 工具提示“缺少代码语义标记”。
- ✅ 唯一合规结构：
def hello():\n print("Hi") - ❌ 不要这样：
<pre class="python">def hello():\n print("Hi")</pre> - ❌ 也不要这样：
def hello():\n print("Hi")（没，纯格式无语义）
代码里含、&却没转义
浏览器在 HTML 解析阶段就会把未转义的<div>当真实标签处理，轻则渲染错乱，重则执行脚本。这不是高亮失败，是 DOM 根本没按你写的生成。
<p>常见错误现象：</p>
<pre class="brush:html;toolbar:false;"><div id="app"></div></pre> 在页面上真渲染出一个 div；或者后续内容全部消失。
<ul>
<li>✅ 转义后：<pre class="brush:html;toolbar:false;"><div id="app"></div></pre>
</li>
<li>✅ 服务端输出前调用 htmlspecialchars()；前端动态插入时用 <code>element.textContent = codeString
element.innerHTML = codeString，除非你已手动替换过 、&pre标签本身在HTML源码里有缩进
会把源码里的换行和空格全当内容渲染。如果你把<pre class="brush:php;toolbar:false;">标签写在缩进后的行里，第一行开头就会多出几个空格——用户复制代码时也会带上，导致 Python 缩进错误或 JSON 解析失败。 <p>最容易被忽略的是：这个空格不是 CSS 问题，删样式没用；也不是高亮库配置问题，改 class 也无效。</p>
- ✅ 推荐写法：让
从行首开始，内容另起一行：<pre class="brush:json;toolbar:false;">{\n "name": "Alice"\n} - ✅ 或用 JS 渲染前 strip 公共缩进：
codeString.split('\n').map(line => line.replace(/^\s+/, '')).join('\n') - ❌ 避免这样写（注意前面的空格）：
{"name": "Alice"}
