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:
1 parent
ba32e0ef9c
commit
8ad5ef9aff
19 files changed
+112
-430
No files matched your search
@@ -1,128 +0,0 @@
|
||||
/* ========== 代码块:GitHub 风格 ========== */
|
||||
.code-block {
|
||||
border-radius: var(--radius-code);
|
||||
border: 1px solid var(--color-line);
|
||||
overflow: hidden;
|
||||
margin: 1.5em 0;
|
||||
background: var(--surface-3);
|
||||
}
|
||||
|
||||
.code-block__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 36px;
|
||||
padding: 0 12px;
|
||||
background: var(--surface-3);
|
||||
border-bottom: 1px solid var(--color-line);
|
||||
font-size: 12px;
|
||||
color: var(--color-ink-3);
|
||||
}
|
||||
|
||||
.code-block__copy {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 12px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--color-line);
|
||||
background: var(--surface-page);
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
color: var(--color-ink-3);
|
||||
}
|
||||
|
||||
.code-block__copy:hover {
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.code-block__body {
|
||||
overflow-x: auto;
|
||||
padding: 16px 20px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 13.5px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.code-block__body {
|
||||
font-size: 12px;
|
||||
padding: 12px 14px;
|
||||
}
|
||||
}
|
||||
|
||||
:is(.entry-content, .wp-posts-content) pre.wp-block-code,
|
||||
:is(.entry-content, .wp-posts-content) pre:not(.wp-block-preformatted) {
|
||||
border-radius: var(--radius-code);
|
||||
border: 1px solid var(--color-line);
|
||||
background: var(--surface-3);
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:is(.entry-content, .wp-posts-content) pre code {
|
||||
display: block;
|
||||
padding: 16px 20px;
|
||||
overflow-x: auto;
|
||||
background: transparent;
|
||||
font-size: 13.5px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Syntax highlight utilities (plugin or wrapped markup) */
|
||||
.gh-keyword {
|
||||
color: #cf222e;
|
||||
}
|
||||
|
||||
html.dark .gh-keyword,
|
||||
html.dark .gh-keyword {
|
||||
color: #ff7b72;
|
||||
}
|
||||
|
||||
.gh-string {
|
||||
color: #0a3069;
|
||||
}
|
||||
|
||||
html.dark .gh-string,
|
||||
html.dark .gh-string {
|
||||
color: #a5d6ff;
|
||||
}
|
||||
|
||||
.gh-comment {
|
||||
color: #6e7781;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
html.dark .gh-comment,
|
||||
html.dark .gh-comment {
|
||||
color: #8b949e;
|
||||
}
|
||||
|
||||
.gh-function {
|
||||
color: #8250df;
|
||||
}
|
||||
|
||||
html.dark .gh-function,
|
||||
html.dark .gh-function {
|
||||
color: #d2a8ff;
|
||||
}
|
||||
|
||||
.gh-var {
|
||||
color: #0550ae;
|
||||
}
|
||||
|
||||
html.dark .gh-var,
|
||||
html.dark .gh-var {
|
||||
color: #79c0ff;
|
||||
}
|
||||
|
||||
.gh-op {
|
||||
color: #24292f;
|
||||
}
|
||||
|
||||
html.dark .gh-op,
|
||||
html.dark .gh-op {
|
||||
color: #c9d1d9;
|
||||
}
|
||||
|
||||
@@ -205,8 +205,10 @@ article.article.box-body,
|
||||
margin: 1.5em 0;
|
||||
}
|
||||
|
||||
/* 行内代码 — 对齐 legacy: 粉色文字 + 粉色背景 */
|
||||
:is(.entry-content, .wp-posts-content) code {
|
||||
/* 行内代码 — 对齐 legacy: 粉色文字 + 粉色背景。
|
||||
* 必须排除 pre code:代码块底色/字号由 bootstrap 的 pre 与 EnlighterJS
|
||||
* 主题决定,行内皮肤套到块内会把整块代码染成粉底。 */
|
||||
:is(.entry-content, .wp-posts-content) code:not(pre code) {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.9em;
|
||||
color: #ff3c98;
|
||||
|
||||
Reference in new issue
Block a user