fix(comments): restore syntax highlighting for comment code blocks
Comment [code] blocks rendered as bare <pre><code> with only Bootstrap's
grey box — no syntax colours, unlike the reference.
The runtime gates EnlighterJS on `_win.highlight_kg`, which was hardcoded to
false. With that false the selector degrades to `pre code.gl, pre code.special`,
and comment code carries neither class, so it never highlighted. The admin
already exposes 「全局功能 → 代码高亮」 (default on), and jioData.codeHighlight
reads it — only the runtime payload disagreed.
- _win.highlight_kg / highlight_hh / highlight_zt (plus white/dark theme
names) now come from Settings::get_code_highlight_config(); the initial
theme follows cookie → mode → time-auto via initial_theme_mode()
- define those values before the _win localize (it sits above jioData in the
same method)
- inject the reference's two head rules the runtime path was missing:
max-height from `highlight_maxheight`, and
`.enlighter-toolbar{display:none}` when `highlight_btn` is off
Tests: comment-image-upload contract gains cases pinning the settings-backed
booleans (and their definition order) and the two inline CSS rules; suite
837/838 with the pre-existing frontend-lifecycle failure.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
kate522andClaude Opus 5 committed
1 parent
0007e78bfe
commit
451b04160b
3 files changed
+90
-7
No files matched your search
@@ -49,6 +49,24 @@ trait ScriptsPart1b {
|
||||
wp_add_inline_style('jio-public', '.lazyloaded{--lazy-animation:lazy_scale!important;}');
|
||||
}
|
||||
|
||||
// 代码高亮的「最大高度」与「扩展按钮」由后台设置驱动。runtime 的
|
||||
// enlighter 路径（评论区 [code] 等）不走 precode.js，需要这两条规则兜底。
|
||||
if (class_exists('\Jio\Settings\Settings')) {
|
||||
$code_highlight_css = \Jio\Settings\Settings::get_code_highlight_config();
|
||||
if (!empty($code_highlight_css['enabled'])) {
|
||||
$max_height_css = (int) $code_highlight_css['maxHeight'];
|
||||
if ($max_height_css > 0) {
|
||||
wp_add_inline_style(
|
||||
'jio-public',
|
||||
'.enlighter-default .enlighter,.wp-block-code:not(:has(.enlighter)),.enlighter-pre:not(:has(.enlighter)){max-height:' . $max_height_css . 'px;overflow-y:auto !important;}'
|
||||
);
|
||||
}
|
||||
if (empty($code_highlight_css['showButtons'])) {
|
||||
wp_add_inline_style('jio-public', '.enlighter-toolbar{display:none !important;}');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$core_dep = 'jio-public';
|
||||
|
||||
$deps = [$core_dep];
|
||||
|
||||
@@ -157,6 +157,20 @@ trait ScriptsPart1c {
|
||||
glob(get_template_directory() . '/assets/js/runtime/*.js') ?: []
|
||||
);
|
||||
$runtime_version = $runtime_mtimes !== [] ? (string) max($runtime_mtimes) : $version;
|
||||
|
||||
// 代码高亮（后台「全局功能 → 代码高亮」）：runtime/main.js 的 enlighter
|
||||
// 选择器与主题名都用这份设置，评论区 [code] 代码块才会按参考主题高亮。
|
||||
$code_highlight = class_exists('\Jio\Settings\Settings')
|
||||
? \Jio\Settings\Settings::get_code_highlight_config()
|
||||
: ['enabled' => true, 'lightTheme' => 'enlighter', 'darkTheme' => 'monokai', 'lineNumbers' => false, 'showButtons' => true, 'maxHeight' => 400];
|
||||
// 初始主题：优先 cookie，其次后台模式，最后按时间自动判断。
|
||||
$current_is_dark = class_exists('\Jio\Settings\Settings')
|
||||
&& \Jio\Settings\Settings::initial_theme_mode() === 'dark';
|
||||
$highlight_theme = [
|
||||
'light' => (string) $code_highlight['lightTheme'],
|
||||
'dark' => (string) $code_highlight['darkTheme'],
|
||||
'current' => $current_is_dark ? (string) $code_highlight['darkTheme'] : (string) $code_highlight['lightTheme'],
|
||||
];
|
||||
$loader_path = get_template_directory() . '/assets/js/runtime/loader.js';
|
||||
$bootstrap_path = get_template_directory() . '/assets/js/runtime/libs/bootstrap.min.js';
|
||||
$post_page_settings = class_exists('\Jio\Settings\Settings')
|
||||
@@ -208,12 +222,14 @@ trait ScriptsPart1c {
|
||||
'ajax_trigger' => __('加载更多', 'jio'),
|
||||
'ajax_nomore' => __('没有更多了', 'jio'),
|
||||
'qj_loading' => __('加载中...', 'jio'),
|
||||
'highlight_kg' => false,
|
||||
'highlight_hh' => false,
|
||||
'highlight_btn' => false,
|
||||
'highlight_zt' => 'enlighter',
|
||||
'highlight_white_zt' => 'enlighter',
|
||||
'highlight_dark_zt' => 'dracula',
|
||||
// 代码高亮：与 jioData.codeHighlight 同源（后台「全局功能 → 代码高亮」），
|
||||
// 供 runtime 的 enlighter 选择器与主题名使用。
|
||||
'highlight_kg' => $code_highlight['enabled'],
|
||||
'highlight_hh' => $code_highlight['lineNumbers'],
|
||||
'highlight_btn' => $code_highlight['showButtons'],
|
||||
'highlight_zt' => $highlight_theme['current'],
|
||||
'highlight_white_zt' => $highlight_theme['light'],
|
||||
'highlight_dark_zt' => $highlight_theme['dark'],
|
||||
'upload_img_size' => 3,
|
||||
'img_upload_multiple' => 6,
|
||||
'upload_video_size' => 30,
|
||||
@@ -449,7 +465,7 @@ trait ScriptsPart1c {
|
||||
// 评论回复脚本：由 assets/js/core/comment-move-form.js 提供（legacy 同款机制），
|
||||
// 不加载 WP comment-reply，避免两套 moveForm 冲突。
|
||||
|
||||
$runtime_routes = $this->resolve_frontend_routes();
|
||||
$runtime_routes = $this->resolve_frontend_routes();
|
||||
|
||||
// 数据注入 - 全站统一消费 window.jioData
|
||||
// Attach to loader_js (bootstraps runtime/main) so ajaxUrl/nonce exist
|
||||
|
||||
@@ -106,3 +106,52 @@ test('上传按钮提供定位上下文，并去掉自造的静态细条覆盖',
|
||||
);
|
||||
assert.doesNotMatch(shell, /height: 3px;[\s\S]{0,80}#comments \.comment-image-upload \.progress/, '自造的 3px 细条已删除');
|
||||
});
|
||||
|
||||
test('评论区代码块随全局代码高亮设置一起高亮（与参考主题一致）', () => {
|
||||
const scripts = read('src/Core/ScriptsPart1c.php');
|
||||
|
||||
// 旧实现把 highlight_* 硬编码为 false，导致 [code] 输出的 <pre><code>
|
||||
// 不匹配 'pre code:not(.enlighter-origin)'，评论区代码块永远无高亮。
|
||||
assert.doesNotMatch(
|
||||
scripts,
|
||||
/'highlight_kg'\s*=>\s*false/,
|
||||
'highlight_kg 不得再硬编码为 false'
|
||||
);
|
||||
assert.match(scripts, /get_code_highlight_config\(\)/, '代码高亮必须读取后台设置');
|
||||
assert.match(
|
||||
scripts,
|
||||
/'highlight_kg'\s*=>\s*\$code_highlight\['enabled'\]/,
|
||||
'highlight_kg 应来自设置'
|
||||
);
|
||||
assert.match(
|
||||
scripts,
|
||||
/'highlight_hh'\s*=>\s*\$code_highlight\['lineNumbers'\]/,
|
||||
'行号开关应来自设置'
|
||||
);
|
||||
assert.match(
|
||||
scripts,
|
||||
/'highlight_zt'\s*=>\s*\$highlight_theme\['current'\]/,
|
||||
'初始主题应按当前明暗模式选择'
|
||||
);
|
||||
|
||||
// 变量必须先于 _win 的 wp_localize_script 定义。
|
||||
const winLocalize = scripts.indexOf("wp_localize_script(");
|
||||
const codeHighlightAssign = scripts.indexOf('$code_highlight = class_exists');
|
||||
assert.ok(codeHighlightAssign > 0 && codeHighlightAssign < winLocalize, '$code_highlight 必须先于 _win 定义');
|
||||
|
||||
// 注释里的 [code] 输出 <pre><code>，需要匹配运行时的高亮选择器。
|
||||
const runtime = read('assets/js/runtime/main.js');
|
||||
assert.match(runtime, /pre code:not\(\.enlighter-origin\)/, '运行时高亮选择器需覆盖裸 pre>code');
|
||||
});
|
||||
|
||||
test('代码高亮的最大高度与按钮开关由后台设置驱动（含评论区 runtime 路径）', () => {
|
||||
const part1b = read('src/Core/ScriptsPart1b.php');
|
||||
assert.match(part1b, /get_code_highlight_config\(\)/, '应读取统一的代码高亮配置');
|
||||
assert.match(
|
||||
part1b,
|
||||
/max-height:' \. \$max_height_css \. 'px;overflow-y:auto !important;/,
|
||||
'最大高度应按设置注入（参考主题同款规则）'
|
||||
);
|
||||
assert.match(part1b, /\.enlighter-toolbar\{display:none !important;\}/, '关闭扩展按钮时隐藏工具栏');
|
||||
assert.match(part1b, /if \(empty\(\$code_highlight_css\['showButtons'\]\)\)/, '仅在按钮开关关闭时隐藏工具栏');
|
||||
});
|
||||
Reference in new issue
Block a user