 laoyang
|
8f8cffd69e
|
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 失败
|
2026-10-26 11:00:47 +08:00 |
|
|
laoyang
|
da0d9ae4a1
|
代码高亮整套自研：10 浅 + 10 深配色、语言标签、评论区贴代码 (#11)
不再依赖第三方高亮插件，全部由主题自己实现。
主题配色（20 套）
- 浅色 10：github / vs / atom-one-light / idea / xcode /
stackoverflow-light / intellij-light / googlecode / magula / color-brewer
- 深色 10：github-dark / atom-one-dark / monokai / github-dark-dimmed /
a11y-dark / stackoverflow-dark / night-owl / srcery /
panda-syntax-dark / tomorrow-night-blue
- 深色卡片带 data-kind="dark"，顶栏跟着换深色底
- 只加载当前选中的一套（20 套全加载会让后出现的规则压前面的，
切换配色容易"看起来没变"）
代码语言标签（用户要求：防止复制错语言）
- 作者标了 language-xxx → 实线边框、正体
- 自动识别猜出来的 → 虚线边框、斜体
- 认不出来 → 显示 "—"，仍保持虚线斜体（不冒充作者标注）
行号
- 默认关；行号槽在 <pre> 外面，复制天然不带行号
- 改掉原主题的 word-break:break-all（任意字符断行，代码像乱码）
- 归零 hljs 主题自带的 pre code.hljs{padding:1em}，
否则代码被压低 1em、与行号槽错位 15.5px
复制
- 默认开；安全上下文判断 + execCommand 退路（HTTP 下 clipboard 是 undefined）
- 取 textContent 而非 innerHTML
- 默认 opacity:0、hover 显示、触屏覆盖回 1
（旧写法只在 @media(hover:none) 里写 1，等于空操作）
自动识别
- 做成选项，默认开
- 只对没标语言的块生效；站内实测长块准确率 22%，不能覆盖作者标注
评论区贴代码
- 评论工具条加"代码"按钮 + 29 种语言面板
- kses 放行 pre 并给 pre/code 放开 class
（WP 默认 pre 整条剥掉、code 属性全清，此前根本贴不了代码）
- 放行 pre 之后 wpautop/wptexturize/make_clickable 自动让路，
代码里的连续空行、引号、URL 都不会被改写
- comments.js 用占位符保护代码块，避免 walk() 的 /\n{3,}/ 压缩
其它
- 资源版本号改为读主题头，不再写死（写死会导致以后升级后
浏览器一直用旧缓存，改了 CSS/JS 完全不生效）
- 删除 footer.php 里旧的 Prism 兜底（两套高亮器同页会互相打架）
验收
- 用线上 284 个真实代码块跑产品代码：284/284 全部变卡片，内容丢字 0、双转义 0
- 47 个 text 标记全部映射到 plaintext（hljs 无 text 语言，不映射会静默不上色）
- 80 个裸 <pre>（无 code 子元素）全部覆盖
- 核心纯函数 65/65；核心反向 10/10 变红
- 浏览器端到端 32/32；行号几何逐行对齐偏差 0.00px，几何反向 4/4 变红
- 端到端反向 7/7 变红；语言标签反向 2/2 变红
- 全量 PHP 语法 95 文件 0 错误
发布：走 theme-update 通道（zip + readme + update.json），
未覆盖服务器主题目录；线上主题目录仍是 3.2.41，待后台升级。
|
2026-10-26 09:00:17 +08:00 |
|