只需 3 步，一次配置，永久生效。
第 1 步：在您的页面样式文件添加以下样式，例如您的样式文件为：/skin/center.css ，请在该文件末尾追加
打开 /skin/center.css，最末尾粘贴：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* 代码块样式 */
.code-block-container { margin:1.2em 0; border-radius:12px; overflow:hidden; background:#0f172a; font-family:'Courier New',monospace; border:1px solid #334155; }
.code-block-header { display:flex; justify-content:flex-end; gap:8px; padding:8px 16px; background:#0a0f1c; border-bottom:1px solid #1e293b; }
.code-block-header button { background:rgba(255,255,255,.08); border:none; color:#94a3b8; padding:4px 12px; border-radius:6px; cursor:pointer; font-size:12px; }
.code-block-header button:hover { background:#1e293b; color:#f1f5f9; }
.code-editor-wrapper { display:flex; background:#0f172a; max-height:380px; overflow-y:auto; }
.code-line-numbers { background:#0a0f1c; color:#5b6e8c; font-size:13.5px; line-height:1.55; text-align:right; padding:16px 12px 16px 16px; user-select:none; white-space:pre; border-right:1px solid #1e293b; flex-shrink:0; }
.code-scroll-area { flex:1; overflow:auto; }
.code-text { display:none; }
.code-highlight { padding:16px; font-size:13.5px; line-height:1.55; white-space:pre; color:#e2e8f0; background:#0f172a; margin:0; }
.code-highlight .keyword { color:#7aa2f7; font-weight:500; }
.code-highlight .string { color:#9ece6a; }
.code-highlight .comment { color:#565f89; font-style:italic; }
.code-highlight .number { color:#ff9e64; }
.code-highlight .function { color:#bb9af7; font-weight:500; }
第 2 步：新建 /skin/codeblock.js
新建文件，粘贴以下js代码并保存：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
/* 内容页代码块按钮：全选 / 复制 / 删除 */
(function () {
'use strict';
function toast(msg) {
var old = document.getElementById('__cb_toast__');
if (old) old.remove();
var el = document.createElement('div');
el.id = '__cb_toast__';
el.textContent = msg;
el.style.cssText = 'position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#1e293b;color:#f1f5f9;padding:12px 28px;border-radius:40px;font-size:15px;z-index:999999;pointer-events:none;border:1px solid #475569;';
document.body.appendChild(el);
setTimeout(function () { el.remove(); }, 1600);
}
function copyText(text) {
if (navigator.clipboard && window.isSecureContext) {
return navigator.clipboard.writeText(text).then(function(){return true;}).catch(function(){return fb(text);});
}
return Promise.resolve(fb(text));
}
function fb(t) {
try {
var ta = document.createElement('textarea');
ta.value = t; ta.style.cssText='position:fixed;left:-9999px;';
document.body.appendChild(ta); ta.select();
var ok = document.execCommand('copy');
document.body.removeChild(ta); return ok;
} catch(e){ return false; }
}
document.addEventListener('click', function (e) {
var btn = e.target;
while (btn && btn.tagName !== 'BUTTON' && btn !== document) btn = btn.parentNode;
if (!btn || btn.tagName !== 'BUTTON') return;
var header = btn.parentNode;
if (!header.classList || !header.classList.contains('code-block-header')) return;
var block = header.parentNode;
if (!block.classList.contains('code-block-container')) return;
var label = btn.textContent.trim();
var pre = block.querySelector('.code-highlight');
var ta = block.querySelector('.code-text');
var txt = (pre && pre.textContent) || (ta && ta.value) || '';
if (label === '全选') {
e.preventDefault(); e.stopPropagation();
var r = document.createRange(); r.selectNodeContents(pre || ta || block);
var s = window.getSelection(); s.removeAllRanges(); s.addRange(r);
toast('✅ 已全选');
} else if (label === '复制') {
e.preventDefault(); e.stopPropagation();
if (!txt) { toast('❌ 没有可复制的内容'); return; }
copyText(txt).then(function(ok){
toast(ok ? '✅ 复制成功' : '❌ 复制失败');
});
} else if (label === '删除') {
e.preventDefault(); e.stopPropagation();
if (confirm('确定删除这个代码块吗？')) {
block.remove(); toast('?️ 已删除');
}
}
}, true);
console.log('代码块按钮已就绪');
})();
第 3 步：内容页模板引入 JS
打开您的内容页模板，在 </body> 前一行添加以下js文件代码：
<script src="/skin/codeblock.js"></script>
</body>
保存，Ctrl + F5 强刷。
日常使用
后台编辑器 → 点工具栏 < / > 按钮
选语言 → 粘贴代码 → 点【插入代码块】
正常保存文章
前台就会显示带高亮、行号、复制按钮的代码块。
完成检查
□ center.css 末尾追加了代码块 CSS
□ codeblock.js 新建并粘贴
□ 内容页模板引用了 codeblock.js
□ 强刷后代码块显示深色高亮
□ 点"复制"能弹出" 复制成功"
搞定！ 以后发文章直接点 < / > 按钮就行。
本网声明：功能更新发布此文仅出于信息分享，并非赞同其观点或证实其描述，不承担侵权行为的连带责任。文章内容仅供参考，不构成投资建议。投资者据此操作，风险自担。版权归原作者所有，如涉版权或来源标注有误，请联系我们删除。本网原创内容未经书面授权，任何单位或个人不得转载和摘编。
[ 编辑： NO 26 ]
