代码高亮整套自研: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:
2026-10-26 09:00:17 +08:00
parent f3583e07c5
commit da0d9ae4a1
32 changed files with 2784 additions and 23 deletions
+72
View File
@@ -299,6 +299,78 @@ if ($yang_per_page <= 0) {
<?php echo $smilies; ?>
</div>
</div>
<span class="comment-toolbar-sep" aria-hidden="true"></span>
<?php
/* ── 3.2.42 代码块按钮 ────────────────────────────
* 访客讨论文章正文里的代码时,往往需要贴一段代码回来。
* 在此之前这件事**根本做不到**(用真实 WP 7.1.3 实测):
* · `<pre>` 不在 kses 白名单里 → 整条被剥掉
* · `<code>` 在,但任何属性都会被剥,包括 class →
* 语言标记保不住
* · 没有 pre 兜着时 wpautop 会套 <p>,
* 而 <p> 的 white-space:normal 把行首缩进折叠掉
* · wptexturize 把 ' 变成弯引号、-- 变成破折号,
* make_clickable 把 URL 包成 <a> —— 代码直接跑不了
* 现在 pre 已进白名单,后两条会被 pre 自动挡住
* (实测 11 条判据全通过)。
*
* 语言必须让访客**自己选**:不选就没法可靠地上色,
* 而自动识别在站内实测只有 22% 准确率,不能替访客决定。
*/
$yang_hl_choices = function_exists('yang_hl_themes') ? array(
'text' => __('纯文本', 'kratos'),
'bash' => 'Bash',
'shell' => 'Shell',
'python' => 'Python',
'java' => 'Java',
'javascript' => 'JavaScript',
'typescript' => 'TypeScript',
'php' => 'PHP',
'c' => 'C',
'cpp' => 'C++',
'csharp' => 'C#',
'go' => 'Go',
'rust' => 'Rust',
'ruby' => 'Ruby',
'kotlin' => 'Kotlin',
'swift' => 'Swift',
'sql' => 'SQL',
'json' => 'JSON',
'yaml' => 'YAML',
'xml' => 'HTML/XML',
'css' => 'CSS',
'diff' => 'Diff',
'markdown' => 'Markdown',
'makefile' => 'Makefile',
'powershell' => 'PowerShell',
'dos' => 'Batch',
'ini' => 'INI',
'dockerfile' => 'Dockerfile',
'nginx' => 'Nginx',
) : array('text' => __('纯文本', 'kratos'));
?>
<div class="comment-tool-group comment-tool-group-code">
<button type="button" class="comment-tool-btn comment-code-btn" id="yang-code-btn"
aria-expanded="false" aria-controls="yang-code-panel"
title="<?php esc_attr_e('插入代码', 'kratos'); ?>"
aria-label="<?php esc_attr_e('插入代码', 'kratos'); ?>">
<span class="comment-tool-glyph comment-tool-glyph-code" aria-hidden="true">&lt;/&gt;</span>
</button>
<div class="comment-code-panel" id="yang-code-panel" hidden>
<div class="comment-code-panel-title"><?php esc_html_e('选择代码语言', 'kratos'); ?></div>
<div class="comment-code-langs">
<?php foreach ($yang_hl_choices as $yang_v => $yang_n) : ?>
<button type="button" class="comment-code-lang"
data-lang="<?php echo esc_attr($yang_v); ?>"><?php echo esc_html($yang_n); ?></button>
<?php endforeach; ?>
</div>
<div class="comment-code-panel-foot">
<?php esc_html_e('选好后在光标处插入代码块,把示例文字换成你的代码即可。', 'kratos'); ?>
</div>
</div>
</div>
</div>
<textarea class="comment-input" id="comment" name="comment" rows="6"