kate522
8ad5ef9aff
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.
61 lines
3.0 KiB
JavaScript
61 lines
3.0 KiB
JavaScript
'use strict';
|
|
|
|
const assert = require('node:assert/strict');
|
|
const fs = require('node:fs');
|
|
const path = require('node:path');
|
|
const test = require('node:test');
|
|
|
|
const root = path.resolve(__dirname, '..', '..');
|
|
const read = (file) => fs.readFileSync(path.join(root, file), 'utf8');
|
|
const exists = (file) => fs.existsSync(path.join(root, file));
|
|
|
|
// 代码块只有一条渲染链路：页面内所有 <pre><code> 都交给 runtime 的
|
|
// EnlighterJS 初始化，容器版式由 bootstrap 的 pre + main.css 决定。
|
|
// 这里锁住三件事：① 不再有并行的感叹号/复制按钮预处理脚本；
|
|
// ② 参考主题的 pre 版式数值没有被二次皮肤覆盖；③ 工具栏字形按 FA5 码位映射。
|
|
test('代码块只保留 runtime 一条高亮链路', () => {
|
|
assert.ok(!exists('assets/js/precode.js'), '并行的 precode.js 预处理脚本应已删除');
|
|
assert.ok(!exists('assets/css/frontend/single-post/code-blocks.css'), '自造的代码块皮肤应已删除');
|
|
assert.ok(!exists('assets/js/enlighter'), '未使用的 enlighter 副本目录应已删除');
|
|
|
|
const runtime = read('src/Core/ScriptsPart1c.php');
|
|
assert.doesNotMatch(runtime, /precode/i, 'PHP 不再入队 precode 脚本');
|
|
assert.doesNotMatch(runtime, /has_code/, 'has_code 需求位随 precode 一并移除');
|
|
|
|
const enqueue = read('src/Core/ScriptsPart1b.php');
|
|
assert.doesNotMatch(enqueue, /single-post\/code-blocks/, '不再按 has_code 入队自造皮肤');
|
|
|
|
// runtime 的初始化保持参考主题的选择器与选项。
|
|
const main = read('assets/js/runtime/main.js');
|
|
assert.match(main, /pre code:not\(\.enlighter-origin\)/);
|
|
assert.match(main, /textOverflow: 'scroll'/);
|
|
assert.match(main, /rawButton: !1/);
|
|
});
|
|
|
|
test('正文 pre 版式沿用 bootstrap + legacy，不叠加二次容器', () => {
|
|
const typography = read('assets/css/core/typography.css');
|
|
|
|
// 旧实现把整块 pre 重绘成深色卡片（#282c34 / 15px 内边距 / 14px），
|
|
// 与参考主题的 muted 底色 + bootstrap 9.5px 内边距冲突。
|
|
assert.doesNotMatch(typography, /#282c34/, '不得再把 pre 重绘成深色卡片');
|
|
assert.doesNotMatch(
|
|
typography,
|
|
/\.wp-posts-content pre[\s\S]{0,200}?padding:\s*15px/,
|
|
'不得覆盖 bootstrap 的 pre 内边距'
|
|
);
|
|
|
|
const enqueue = read('src/Core/ScriptsPart1b.php');
|
|
assert.match(enqueue, /max-height:' \. \$max_height_css \. 'px;overflow-y:auto !important;/);
|
|
assert.match(enqueue, /\.enlighter-toolbar\{display:none !important;\}/);
|
|
});
|
|
|
|
test('代码块工具栏字形按 FA5 码位映射', () => {
|
|
const min = read('assets/js/runtime/enlighter/enlighterjs.min.css');
|
|
|
|
// \f0ea 在 FA4 是剪贴板，在 FA5 变成「粘贴」；剪贴板造型是 \f328。
|
|
assert.match(min, /enlighter-btn-copy::after\{content:"\\f328"\}/);
|
|
assert.doesNotMatch(min, /enlighter-btn-copy::after\{content:"\\f0ea"\}/);
|
|
assert.match(min, /enlighter-btn-raw::after\{content:"\\f121"\}/);
|
|
assert.match(min, /enlighter-btn-window::after\{content:"\\f1b2"\}/);
|
|
});
|