From ae840a47a99d4e9ee08717a97bef5207020ceb89 Mon Sep 17 00:00:00 2001 From: jxw Date: Thu, 22 Oct 2026 16:51:21 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E5=BD=BB=E5=BA=95=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=E4=BB=A3=E7=A0=81=E5=9D=97=E5=9C=A8=E6=B5=85=E8=89=B2=E6=A8=A1?= =?UTF-8?q?=E5=BC=8F=E4=B8=8B=E7=BB=A7=E6=89=BF=E6=96=87=E5=AD=97=E9=A2=9C?= =?UTF-8?q?=E8=89=B2=E5=AF=BC=E8=87=B4=E5=8F=91=E6=9A=97=E7=9C=8B=E4=B8=8D?= =?UTF-8?q?=E6=B8=85=E7=9A=84bug=EF=BC=8C=E5=86=85=E7=BD=AE=E9=AB=98?= =?UTF-8?q?=E5=AF=B9=E6=AF=94=E5=BA=A6GitHub=20Dark=E8=AF=AD=E6=B3=95?= =?UTF-8?q?=E8=89=B2=E5=BD=A9=E4=B8=8E=E7=B2=BE=E7=BE=8E=E5=A4=8D=E5=88=B6?= =?UTF-8?q?=E8=A7=86=E7=AA=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/index.html | 144 ++++++++++++++++++++++++++++++++++++++------ 1 file changed, 125 insertions(+), 19 deletions(-) diff --git a/frontend/index.html b/frontend/index.html index aee4324..64adee3 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -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; /* 天蓝元数据 */ + } @@ -1104,22 +1204,28 @@
- ${lang} -
`; - 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 = `已复制！✓`; copyBtn.style.color = '#38bdf8'; + copyBtn.style.borderColor = '#38bdf8'; showToast('代码已成功复制到剪贴板', 'success'); setTimeout(() => { - copyBtn.innerText = '一键复制'; - copyBtn.style.color = '#c9d1d9'; + copyBtn.innerHTML = ` + + 复制代码 + `; + copyBtn.style.color = '#f0f6fc'; + copyBtn.style.borderColor = '#30363d'; }, 2000); }); });