admin/my-blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 彻底修复代码块在浅色模式下继承文字颜色导致发暗看不清的bug，内置高对比度GitHub Dark语法色彩与精美复制视窗
Build and Deploy Blog / deploy (push) Successful in 8s
Details

Browse Source
This commit is contained in:
admin
2026-10-22 16:51:21 +08:00
parent d4f26930d6
commit ae840a47a9
1 changed files with 125 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/index.html
+125 -19
View File
@@ -83,32 +83,132 @@
.dark .markdown-body :not(pre) > code { color: #38bdf8; background: rgba(148, 163, 184, 0.2); }
.markdown-body img { max-width: 100%; border-radius: 0.75rem; margin: 1.5rem auto; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
.markdown-body hr { border: none; border-top: 1px dashed rgba(148, 163, 184, 0.3); margin: 2rem 0; }
.markdown-body pre {
background: #0d1117 !important;
border: 1px solid #30363d !important;
border-radius: 0.75rem;
padding: 1.25rem !important;
overflow-x: auto;
color: #f0f6fc !important;
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
font-size: 0.92rem !important;
line-height: 1.75 !important;
}
.markdown-body pre code {
color: #f0f6fc !important;
background: transparent !important;
font-family: inherit !important;
}
/* macOS 风格代码高亮块容器 */
/* macOS 风格代码高亮块容器与自包含超高对比度语法配色 (彻底杜绝发暗看不清) */
.code-block-wrapper {
margin: 1.5rem 0;
border-radius: 0.75rem;
border-radius: 0.875rem;
overflow: hidden;
background: #0d1117;
border: 1px solid #30363d;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
background: #0d1117 !important;
border: 1px solid #30363d !important;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
}
.code-block-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5rem 1rem;
background: #161b22;
border-bottom: 1px solid #30363d;
padding: 0.6rem 1rem;
background: #161b22 !important;
border-bottom: 1px solid #30363d !important;
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
font-size: 0.75rem;
color: #8b949e;
}
.code-block-dots { display: flex; gap: 0.375rem; }
.code-dot { width: 0.65rem; height: 0.65rem; border-radius: 9999px; }
.code-block-dots { display: flex; gap: 0.4rem; }
.code-dot { width: 0.7rem; height: 0.7rem; border-radius: 9999px; }
.code-dot.red { background: #ff5f56; }
.code-dot.yellow { background: #ffbd2e; }
.code-dot.green { background: #27c93f; }
.code-block-wrapper pre { margin: 0; padding: 1rem; overflow-x: auto; background: transparent; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.875rem; }
.code-block-lang {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
font-weight: 700;
font-size: 0.75rem;
letter-spacing: 0.05em;
color: #58a6ff !important;
text-transform: uppercase;
}
.code-copy-btn {
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.25rem 0.65rem;
background: #21262d;
border: 1px solid #30363d;
border-radius: 0.5rem;
color: #f0f6fc !important;
font-size: 0.72rem;
font-weight: 600;
transition: all 0.15s ease;
}
.code-copy-btn:hover {
background: #30363d;
border-color: #8b949e;
color: #ffffff !important;
}
.code-block-wrapper pre {
margin: 0 !important;
padding: 1.25rem !important;
overflow-x: auto;
background: transparent !important;
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
font-size: 0.92rem !important;
line-height: 1.75 !important;
color: #f0f6fc !important; /* 强制纯正高亮白，杜绝黑色继承 */
}
.code-block-wrapper code,
.code-block-wrapper pre * {
color: #f0f6fc !important; /* 默认保底全为高对比亮白 */
}
/* 纯正 GitHub Dark 顶级语法高亮体系 (100% 独立，不依赖任何第三方未加载 CSS) */
.code-block-wrapper .hljs-comment,
.code-block-wrapper .hljs-quote {
color: #8b949e !important; /* 高亮银灰注释，极易辨认 */
font-style: italic;
}
.code-block-wrapper .hljs-keyword,
.code-block-wrapper .hljs-selector-tag,
.code-block-wrapper .hljs-subst {
color: #ff7b72 !important; /* 珊瑚红关键字 */
font-weight: 600;
}
.code-block-wrapper .hljs-string,
.code-block-wrapper .hljs-title,
.code-block-wrapper .hljs-section,
.code-block-wrapper .hljs-attribute,
.code-block-wrapper .hljs-literal,
.code-block-wrapper .hljs-template-tag,
.code-block-wrapper .hljs-template-variable {
color: #a5d6ff !important; /* 荧光冰蓝文本与字符串 */
}
.code-block-wrapper .hljs-type,
.code-block-wrapper .hljs-class {
color: #d2a8ff !important; /* 浅紫类名与类型 */
font-weight: 600;
}
.code-block-wrapper .hljs-variable {
color: #ffa657 !important; /* 暖橙变量名 */
}
.code-block-wrapper .hljs-number {
color: #79c0ff !important; /* 明亮青蓝数值 */
}
.code-block-wrapper .hljs-built_in,
.code-block-wrapper .hljs-bullet,
.code-block-wrapper .hljs-code {
color: #7ee787 !important; /* 亮绿内置命令与函数 */
}
.code-block-wrapper .hljs-meta {
color: #58a6ff !important; /* 天蓝元数据 */
}
</style>
</head>
<body class="bg-slate-50 dark:bg-slate-950 text-slate-800 dark:text-slate-100 min-h-screen transition-colors duration-200 antialiased font-sans selection:bg-sky-500 selection:text-white">
@@ -1104,22 +1204,28 @@
<div class="code-dot green"></div>
</div>
<div style="display:flex;align-items:center;gap:0.75rem;">
<span style="font-family:monospace;font-weight:600;font-size:0.75rem;">${lang}</span>
<button class="copy-btn" style="cursor:pointer;padding:0.2rem 0.5rem;background:#21262d;border:1px solid #30363d;border-radius:0.375rem;color:#c9d1d9;font-size:0.7rem;transition:all;">
一键复制
<span class="code-block-lang">${lang}</span>
<button class="code-copy-btn">
<svg style="width:0.85rem;height:0.85rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg>
<span>复制代码</span>
</button>
</div>
`;
const copyBtn = header.querySelector('.copy-btn');
const copyBtn = header.querySelector('.code-copy-btn');
copyBtn.addEventListener('click', () => {
navigator.clipboard.writeText(codeText).then(() => {
copyBtn.innerText = '已复制！✓';
copyBtn.innerHTML = `<span>已复制！✓</span>`;
copyBtn.style.color = '#38bdf8';
copyBtn.style.borderColor = '#38bdf8';
showToast('代码已成功复制到剪贴板', 'success');
setTimeout(() => {
copyBtn.innerText = '一键复制';
copyBtn.style.color = '#c9d1d9';
copyBtn.innerHTML = `
<svg style="width:0.85rem;height:0.85rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg>
<span>复制代码</span>
`;
copyBtn.style.color = '#f0f6fc';
copyBtn.style.borderColor = '#30363d';
}, 2000);
});
});