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:
@@ -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;
|
||||
}
|
||||
|
||||
/* 深色配色必须让卡片自带深色底与深色顶条。
|
||||
|
||||
Reference in New Issue
Block a user