代码高亮整套自研: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:
@@ -1141,6 +1141,107 @@ function kratos_options()
|
||||
'requires' => 'a_lightbox_enable',
|
||||
);
|
||||
|
||||
/* ══════════════════════════════════════════════════════════
|
||||
* 十二·五、代码高亮
|
||||
*
|
||||
* 自研替换(highlight.js 自托管),不再依赖 Enlighter / Prism 插件。
|
||||
*
|
||||
* ⚠️ 这里的 std 必须与 inc/theme-highlight.php 的运行时默认值一致
|
||||
* (yang_hl_enabled() / yang_hl_js_config())。
|
||||
* `std` 只服务「后台预填」和「恢复默认」,**运行时完全不读**;
|
||||
* 两处不一致会出现「后台看着勾上了、前台却没生效」。
|
||||
* ══════════════════════════════════════════════════════════ */
|
||||
$options[] = array(
|
||||
'name' => __('代码高亮', 'kratos'),
|
||||
'type' => 'heading',
|
||||
);
|
||||
|
||||
$options[] = array(
|
||||
'name' => __('启用代码高亮', 'kratos'),
|
||||
'desc' => __('接管文章与评论里的所有代码块:配色、语言标签、复制按钮、行号。'
|
||||
. '<br>关掉则退回插件高亮(若插件也没开,代码块就是纯文本)。', 'kratos'),
|
||||
'std' => '1',
|
||||
'id' => 'a_highlight_enable',
|
||||
'type' => 'checkbox',
|
||||
);
|
||||
|
||||
/* 配色:20 套 = 10 浅 + 10 深
|
||||
*
|
||||
* 深色组不是装饰。两个实际用途:
|
||||
* ① 技术文章里把代码块做成深色,能压住浅色的正文,突出代码本身;
|
||||
* ② 一篇文章并列给 Python / Java 两种实现时,配色差异帮读者分清段落。
|
||||
* 站内实测有 19 篇文章含 ≥2 种语言、38 处相邻代码块语言不同 —— 确有场景。
|
||||
*
|
||||
* 只加载选中的那一套:20 套全加载约 50KB,没必要,
|
||||
* 而且多套同时在场时会互相压制,切换时容易"看起来没变"。 */
|
||||
$yang_hl_opts = array();
|
||||
if (function_exists('yang_hl_themes')) {
|
||||
foreach (yang_hl_themes() as $k => $v) {
|
||||
$yang_hl_opts[$k] = $v[1] === 'dark'
|
||||
? sprintf(__('%s(深色)', 'kratos'), $v[0])
|
||||
: sprintf(__('%s(浅色)', 'kratos'), $v[0]);
|
||||
}
|
||||
}
|
||||
$options[] = array(
|
||||
'name' => __('代码配色', 'kratos'),
|
||||
'desc' => __('共 20 套,<b>10 套浅色 + 10 套深色</b>。'
|
||||
. '<br><b>浅色</b>与站点底色接近,整体更统一;'
|
||||
. '<b>深色</b>能压住浅色正文、让代码更突出,技术文章里常用。'
|
||||
. '<br><b>说明:</b>深色配色会连带代码块的顶栏与底色一起变深,'
|
||||
. '不会出现"浅色页面上印浅色字"。', 'kratos'),
|
||||
'std' => 'github',
|
||||
'id' => 'a_highlight_theme',
|
||||
'type' => 'select',
|
||||
'options' => $yang_hl_opts,
|
||||
'requires' => 'a_highlight_enable',
|
||||
);
|
||||
|
||||
$options[] = array(
|
||||
'name' => __('显示行号', 'kratos'),
|
||||
'desc' => __('<b>默认关闭。</b>'
|
||||
. '<br>行号画在代码左侧的独立区域里,<b>不会进入复制内容</b> ——'
|
||||
. '复制出去的永远是干净的代码,可以直接粘到编辑器里跑。'
|
||||
. '<br><b>说明:</b>如果是要逐行对比两段代码,建议复制到编辑器里用'
|
||||
. '它自带的行号或对比功能,那样更准确。', 'kratos'),
|
||||
'std' => '0',
|
||||
'id' => 'a_highlight_line_numbers',
|
||||
'type' => 'checkbox',
|
||||
'requires' => 'a_highlight_enable',
|
||||
);
|
||||
|
||||
$options[] = array(
|
||||
'name' => __('显示复制按钮', 'kratos'),
|
||||
'desc' => __('<b>默认开启。</b>代码块右上角一个「复制」,点一下把纯代码放进剪贴板。'
|
||||
. '<br>桌面端鼠标移到代码块上才显形(不占视觉),'
|
||||
. '触屏设备上常驻可见。', 'kratos'),
|
||||
'std' => '1',
|
||||
'id' => 'a_highlight_copy_button',
|
||||
'type' => 'checkbox',
|
||||
'requires' => 'a_highlight_enable',
|
||||
);
|
||||
|
||||
/* 自动识别必须做成选项,不能强行开着
|
||||
*
|
||||
* 站内实测:18 个 ≥4 行、作者没标语言的代码块,用 highlightAuto 只对了 4 个
|
||||
* (22%)。典型错误:Java 被认成 Kotlin 或 C#、shell 输出被认成 Swift、
|
||||
* 配置文件被认成 Go/Ruby、140 行 LaTeX 被认成 Ruby。
|
||||
* 所以它默认开着当兜底(老文章大量没标语言,不开就全是白板),
|
||||
* 但必须让用户能关掉 —— 否则等于把 78% 的错误结果当成事实贴在页面上。
|
||||
* 识别出来的标签会画成虚线边框 + 斜体,与作者手标的实线区分开。 */
|
||||
$options[] = array(
|
||||
'name' => __('自动识别代码语言', 'kratos'),
|
||||
'desc' => __('<b>默认开启。</b>对<b>没写语言标记</b>的代码块自动判断语言并上色;'
|
||||
. '作者标了语言的块永远按标记来,不受影响。'
|
||||
. '<br><b>识别结果会画成虚线边框 + 斜体</b>,提醒读者这是猜的、可能不准。'
|
||||
. '<br><b>为什么要做成开关:</b>自动识别并不总对 —— 已用站内代码实测,'
|
||||
. '像 Java 可能被认成 Kotlin/C#、命令行输出可能被认成 Swift。'
|
||||
. '如果你发现某些代码块颜色明显不对,可以关掉它,全部按纯文本显示。', 'kratos'),
|
||||
'std' => '1',
|
||||
'id' => 'a_highlight_autodetect',
|
||||
'type' => 'checkbox',
|
||||
'requires' => 'a_highlight_enable',
|
||||
);
|
||||
|
||||
/* ══════════════════════════════════════════════════════════
|
||||
* 十三、自定义代码 —— 兜底用,放最后
|
||||
*
|
||||
|
||||
Reference in New Issue
Block a user