3.2.43: 修代码块重影与语言识别,含 4 个静默 bug (#12)

排查结论:不是插件冲突,对手是主题自己的 kratos.css。

现象一「重影/阴影」的真实成因是 CSS 优先级 + 行高错位:
kratos.css 的 .content code(0,4,1) / .content pre code(0,4,2) 抢走了
border-radius:4px、color:#333、font-size:13px。字号被顶到 13px 后
行高算成 21.06px,而行号槽是 12.5px/20.25px,每行错开 0.81px,
30 行累计 24px —— 视觉上就是「两层东西叠在一起」。

现象二「多一个 copy 按钮」未能复现:2 个页面实测每张卡恰好 1 个
.cb-copy;Prism.plugins 只有 autoloader,copy-to-clipboard 未注册;
Enlighter 插件目录不存在。已请用户指认页面。

修复:
- highlight.css 的选择器提到与原主题同级 (0,4,2),靠出现更晚取胜,
  不用 !important。
- 顺带修掉 4 个静默 bug(都不报错、页面看着正常):
  1. header.php 从未调 body_class(),裸 <body> ⇒ 所有挂 body_class
     过滤器的类全部静默失效,包括行号开关 opt-ln(选项已开却不显示)。
  2. 79 个代码块的语言写在 <pre lang=> 或 data-enlighter-language 上,
     只读 <code> class 必然读不到 ⇒ 标签显示「—」。
  3. 白名单 4 项指向未打包语言(powershell/dos/dockerfile/nginx)。
     hljs 遇到不认识的语言不抛错,只 warn 一句就退回不高亮 ⇒
     整块白板。站内这 4 种用量均为 0,属潜伏 bug。
  4. hljs 把 plaintext 块改写成 language-undefined;highlightAuto
     对纯文本返回字符串 'undefined',if (r.language) 会误当真值。

顺带收敛:yang_hl_languages() 原本手写第二份清单,与 yang_hl_norm_lang()
里的表互相漂移,改为从 yang_hl_known_map() 单一来源派生。

验证:
- 单测 44 + 24 断言全通过
- 反向验证 10 组注入全部变红(含专门注入「恢复手写清单」验证新判据)
- 全站 284 块直连数据库校验:568 通过 / 0 失败,
  语言覆盖率 71.8% → 98.6%,残留与污染全 0
- 剩余 4 块显示「—」是正确降级(jsp×2、latex×2 未打包进 hljs)
- 夹具对照:新版 0 失败 vs 全旧版 10 失败
This commit is contained in:
2026-10-26 11:00:47 +08:00
parent da0d9ae4a1
commit 8f8cffd69e
5 changed files with 304 additions and 52 deletions
+30
View File
@@ -152,15 +152,45 @@
.cb .cb-body > pre { flex: 1 1 auto; min-width: 0; }
/* 🔴 卡片里的 code 必须彻底摆脱原主题 `.content code` 的影响。
*
* 原主题 kratos.css 有两条规则(实测优先级):
* `.k-main .details .article .content code` → (0,4,1)
* margin:0 3px; padding:2px 4px; border-radius:4px;
* background-color:#eff0f1; color:#333; font-size:13px
* `.k-main .details .article .content pre code` → (0,4,2)
* margin:0; padding:0; background-color:transparent
*
* 后者只救了 margin/padding/background。**border-radius、color、font-size
* 全都漏了**,于是:
* · border-radius:4px → 代码区里嵌一块 4px 圆角,和卡片 8px 圆角打架,
* 视觉上就是用户说的「有阴影/重影」
* · font-size:13px → 代码字号被顶大,行高跟着从 20.25px 变 21.06px,
* 而行号槽用的是 12.5px/20.25px ⇒ 每行错开 0.81px,
* 30 行累计错 24px,行号与代码彻底对不上
* · color:#333 → 把 hljs 主题给 <pre> 的基色(.hljs{color:#000})
* 覆盖成固定的深灰。深色配色下就是深灰压深底,看不清
*
* 修法:选择器强度提到与 `.content pre code` 同级的 (0,4,2) ——
* 靠**出现更晚**取胜,不靠 !important(!important 会让用户/插件再也没法覆盖)。
* 显式写 border-radius:0 而不是依赖"没声明就继承",因为 border-radius
* 不继承、初始值是 0,但原主题那条规则会直接命中 code。 */
.k-main .details .article .content .cb pre code,
.comment-body .cb pre code,
.cb pre code {
display: block;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
font-size: inherit;
line-height: inherit;
color: inherit;
font-family: inherit;
/* 原主题给了 word-break:inherit,pre 上是 normal,这里跟住 */
word-break: inherit;
overflow-wrap: inherit;
}
/* 深色配色必须让卡片自带深色底与深色顶条。