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',