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

+17 -17
View File
@@ -107,28 +107,28 @@ h6 { font-size: 14px; }
font-size: 0.9em;
}
/* ===== 代码块 — 对齐 legacy ===== */
.wp-posts-content pre,
/* 代码块容器版式由 bootstrap 的 pre 与 main.css 的 .wp-posts-content 规则提供,
* 高亮皮肤由 EnlighterJS 自带主题负责,此处不再叠加二次容器。
* 静态页用 .entry-content 包装,这里镜像同一组 pre 规则保持两边一致。 */
.entry-content pre,
.prose pre {
position: relative;
background: #282c34;
color: #abb2bf;
padding: 15px;
border-radius: var(--main-radius, 8px);
overflow-x: auto;
font-size: 14px;
line-height: 1.5;
margin: 0 0 20px;
background: var(--muted-border-color);
color: var(--main-color);
}
.wp-posts-content pre code,
.entry-content pre code,
.prose pre code {
color: inherit;
background: none;
.entry-content pre:not(.wp-block-code),
.prose pre:not(.wp-block-code) {
border: none;
background: 0 0;
padding: 0;
font-size: inherit;
margin: 0;
}
.entry-content .wp-block-code code,
.prose .wp-block-code code {
color: inherit;
background-color: unset;
margin: unset;
}
/* ===== 表格 — 对齐 legacy line 8897 ===== */