代码高亮整套自研: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,待后台升级。
This commit is contained in:
+76
-1
@@ -1549,4 +1549,79 @@
|
||||
.yang-comment-content {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* ── 3.2.42 代码块按钮与面板 ─────────────────────────────────
|
||||
* 访客讨论正文里的代码时需要贴代码回来。此前这件事**做不到**:
|
||||
* pre 不在 kses 白名单里(整条被剥)、code 的 class 被剥、
|
||||
* 没有 pre 时 wpautop 会套 <p> 把缩进折叠掉。
|
||||
* 现在 pre 已放行,后端由 theme-comments.php 的白名单挡着。
|
||||
*/
|
||||
.comment-tool-glyph-code {
|
||||
font-family: var(--yq-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
|
||||
font-size: 12px;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.comment-code-panel {
|
||||
position: absolute;
|
||||
top: calc(100% + 6px);
|
||||
left: 0;
|
||||
z-index: 21;
|
||||
width: 260px;
|
||||
padding: 10px;
|
||||
border: 1px solid #e2e7ee;
|
||||
border-radius: var(--yq-radius-lg, 6px);
|
||||
background-color: #fff;
|
||||
box-shadow: 0 6px 20px rgba(31, 35, 40, 0.12);
|
||||
}
|
||||
|
||||
.comment-code-panel[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.comment-code-panel-title {
|
||||
margin-bottom: 8px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #656d76;
|
||||
}
|
||||
|
||||
.comment-code-langs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
max-height: 190px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.comment-code-lang {
|
||||
padding: 3px 8px;
|
||||
border: 1px solid #e2e7ee;
|
||||
border-radius: 4px;
|
||||
background: #fff;
|
||||
color: #4b5563;
|
||||
font-size: 11px;
|
||||
font-family: var(--yq-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
|
||||
cursor: pointer;
|
||||
transition: color 0.12s, border-color 0.12s, background-color 0.12s;
|
||||
}
|
||||
|
||||
.comment-code-lang:hover {
|
||||
color: var(--yq-primary, #00a2ff);
|
||||
border-color: var(--yq-primary, #00a2ff);
|
||||
background: #f6fbff;
|
||||
}
|
||||
|
||||
.comment-code-lang:focus-visible {
|
||||
outline: 2px solid var(--yq-primary, #00a2ff);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
.comment-code-panel-foot {
|
||||
margin-top: 8px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid #f0f3f7;
|
||||
font-size: 11px;
|
||||
line-height: 1.6;
|
||||
color: #8a9199;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user