fix: sync markdown code blocks with CodeViewer compact styles

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
程序员阿江(Relakkes) 2026-04-06 21:32:41 +08:00
parent 7ed1c920cc
commit defa72292e

View File

@ -15,26 +15,26 @@ renderer.code = function ({ text, lang }: Tokens.Code) {
const body = highlightedLines
.map((line, index) => `
<div class="grid grid-cols-[3rem,minmax(0,1fr)] gap-0 ${index === lines.length - 1 ? '' : 'border-b border-[#d8dee4]'}">
<span class="select-none border-r border-[#d8dee4] bg-[#f6f8fa] px-3 py-1 text-right text-[11px] text-[#57606a]">${index + 1}</span>
<span class="overflow-hidden bg-white px-4 py-1 whitespace-pre-wrap break-words text-[#24292f]">${line || '&nbsp;'}</span>
<div class="grid grid-cols-[3rem,minmax(0,1fr)] gap-0 hover:bg-[#f6f8fa]/50">
<span class="select-none border-r border-[#eaeef2] bg-[#fafbfc] px-2 py-px text-right text-[11px] text-[#8b949e]">${index + 1}</span>
<span class="overflow-hidden bg-white px-3 py-px whitespace-pre-wrap break-words text-[#24292f]">${line || '&nbsp;'}</span>
</div>
`)
.join('')
return `
<div class="my-4 overflow-hidden rounded-2xl border border-[#d0d7de] bg-[#f6f8fa] text-[#24292f]">
<div class="flex items-center justify-between border-b border-[#d0d7de] bg-white px-3 py-2 text-[11px] text-[#57606a]">
<div class="my-4 overflow-hidden rounded-lg border border-[#d0d7de] bg-[#f6f8fa] text-[#24292f]">
<div class="flex items-center justify-between border-b border-[#d0d7de] bg-white px-3 py-1.5 text-[11px] text-[#57606a]">
<div class="flex items-center gap-3">
<span class="font-semibold uppercase tracking-[0.14em] text-[#57606a]">${languageLabel}</span>
<span>${lines.length} ${lines.length === 1 ? 'line' : 'lines'}</span>
</div>
<button class="rounded-md border border-[#d0d7de] bg-white px-2 py-1 text-[11px] text-[#57606a] transition-colors hover:bg-[#f3f4f6] hover:text-[#24292f]" data-copy-code="${escapeHtml(text)}">
<button class="rounded-md border border-[#d0d7de] bg-white px-2 py-0.5 text-[11px] text-[#57606a] transition-colors hover:bg-[#f3f4f6] hover:text-[#24292f]" data-copy-code="${escapeHtml(text)}">
Copy
</button>
</div>
<div class="max-h-[420px] overflow-auto">
<div class="min-w-full font-[var(--font-mono)] text-[12px] leading-[1.45]">${body}</div>
<div class="min-w-full font-[var(--font-mono)] text-[12px] leading-[1.3]">${body}</div>
</div>
</div>
`