fix(single): align article code blocks with the reference theme

The article body ran two highlighting pipelines at once: the runtime
EnlighterJS pass (same one the comment area uses) plus a bespoke
precode.js enhancer, and a hand-rolled .code-block skin. The two
disagreed, so rendered blocks carried a dark #282c34 card with 15px
padding, 14px text, a border and a second copy button stacked on top of
the EnlighterJS toolbar.

Drop the parallel path and let one pipeline own code blocks:
- delete precode.js, single-post/code-blocks.css and the unused
  assets/js/enlighter copy that only precode.js referenced
- drop the now-dead has_code requirement (PHP scan + feature enqueue)
- render pre exactly as the reference does: bootstrap's pre box
  (9.5px padding / 13px / radius 4) plus main.css's muted background,
  with the EnlighterJS theme supplying the skin

Also scope the inline-code skin to :not(pre code) so it stops painting
the block background pink, and remap the toolbar copy glyph: \f0ea is
the clipboard in FA4 but "paste" in FA5; the clipboard is \f328.

Verified against the reference at 1440px both themes: pre 13px/18.57,
9.5px padding, radius 4, muted background; EnlighterJS block heights
151.31 / 60.38 match exactly.
This commit is contained in:
kate522 committed 2026-11-03 23:31:28 +08:00
1 parent ba32e0ef9c
commit 8ad5ef9aff
19 files changed
+112 -430

No files matched your search

+3 -3
View File
@@ -49,8 +49,9 @@ trait ScriptsPart1b {
wp_add_inline_style('jio-public', '.lazyloaded{--lazy-animation:lazy_scale!important;}');
}
// 代码高亮的「最大高度」与「扩展按钮」由后台设置驱动。runtime 的
// enlighter 路径(评论区 [code] 等)不走 precode.js,需要这两条规则兜底。
// 代码高亮的「最大高度」与「扩展按钮」由后台设置驱动。
// 高亮统一走 runtime 的 enlighter 路径,这两条规则对文章正文、
// 评论区 [code] 与未高亮的裸 pre 一并生效。
if (class_exists('\Jio\Settings\Settings')) {
$code_highlight_css = \Jio\Settings\Settings::get_code_highlight_config();
if (!empty($code_highlight_css['enabled'])) {
@@ -239,7 +240,6 @@ trait ScriptsPart1b {
);
$single_features = [
'has_code' => 'single-post/code-blocks',
'needs_navigation' => 'single-post/navigation',
'needs_cover' => 'single-post/cover',
'needs_related_toc' => 'single-post/related-toc',
-22
View File
@@ -24,7 +24,6 @@ trait ScriptsPart1c {
private function resolve_singular_asset_requirements(bool $is_single_post, bool $is_single_resource, bool $is_paid_content_single): array {
$requirements = [
'is_article' => false,
'has_code' => false,
'has_toc' => false,
'has_video' => false,
'has_hidden_content' => false,
@@ -61,14 +60,6 @@ trait ScriptsPart1c {
? jio_resolve_single_post_display_settings($post_id)
: [];
$content = (string) $post->post_content;
$display_content = $content
. (string) ($settings['front_content'] ?? '')
. (string) ($settings['after_content'] ?? '');
$has_code = (bool) preg_match(
'/(?:<!--\s*wp:(?:code|preformatted|jio\/enlighter)\b|<pre\b|data-enlighter-language)/i',
$display_content
);
$has_hidden_content = $is_paid_content_single || (bool) preg_match(
'/(?:<!--\s*wp:jio\/paid-fragment\b|\[(?:jio_hide|hide|reply|vip|payshow|hidecontent|content)\b|jio-(?:hidden-content|paywall))/i',
$content
@@ -112,7 +103,6 @@ trait ScriptsPart1c {
}
$requirements['is_article'] = $is_article;
$requirements['has_code'] = $has_code;
$requirements['has_toc'] = $is_article && $article_nav_enabled;
$requirements['has_video'] = $has_video;
$requirements['has_hidden_content'] = $has_hidden_content || $has_yiyan || $has_inserted_content;
@@ -262,18 +252,6 @@ trait ScriptsPart1c {
);
}
// Code block enhancements (copy button + language label)
$precode_js = get_template_directory() . '/assets/js/precode.js';
if (!empty($singular_assets['has_code']) && file_exists($precode_js)) {
wp_enqueue_script(
'jio-precode',
$base_uri . '/assets/js/precode.js',
['loader_js'],
(string) filemtime($precode_js),
true
);
}
// Input field enhancements (auto-resize, counter, validation)
$input_expand_js = get_template_directory() . '/assets/js/input-expand.js';
$needs_input_enhancements = (bool) get_query_var('jio_sign')