From 451b04160b32e1e3a346e25297afad0065eeceaa Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 3 Nov 2026 17:31:42 +0800 Subject: [PATCH] fix(comments): restore syntax highlighting for comment code blocks MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Comment [code] blocks rendered as bare
 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) 
---
 src/Core/ScriptsPart1b.php                    | 18 +++++++
 src/Core/ScriptsPart1c.php                    | 30 +++++++++---
 .../comment-image-upload-contract.test.cjs    | 49 +++++++++++++++++++
 3 files changed, 90 insertions(+), 7 deletions(-)

diff --git a/src/Core/ScriptsPart1b.php b/src/Core/ScriptsPart1b.php
index e6f836f7..3727c911 100644
--- a/src/Core/ScriptsPart1b.php
+++ b/src/Core/ScriptsPart1b.php
@@ -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];
diff --git a/src/Core/ScriptsPart1c.php b/src/Core/ScriptsPart1c.php
index 4a13b80f..04a13662 100644
--- a/src/Core/ScriptsPart1c.php
+++ b/src/Core/ScriptsPart1c.php
@@ -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
diff --git a/tests/widget-system/comment-image-upload-contract.test.cjs b/tests/widget-system/comment-image-upload-contract.test.cjs
index e14c381f..e7b06235 100644
--- a/tests/widget-system/comment-image-upload-contract.test.cjs
+++ b/tests/widget-system/comment-image-upload-contract.test.cjs
@@ -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: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] 输出 
,需要匹配运行时的高亮选择器。
+  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'\]\)\)/, '仅在按钮开关关闭时隐藏工具栏');
+});