8dc4f5bd05
* Fix ASCII diagram rendering: use system mono font for box-drawing chars Geist Mono renders box-drawing characters (┌─┐│└┘) at double width, breaking alignment in the concepts page diagram. Use system monospace fonts (Menlo, Monaco, Consolas) for ascii-variant code blocks, which handle these characters at correct single width. * Fix CSS specificity: code element was overriding pre font-family .docs-content code sets font-family to Geist Mono, which overrides the system mono font set on the parent pre element. Geist Mono is loaded with Latin subset only, lacking box-drawing glyphs (U+2500-257F), so browsers fall back to CJK-aware fonts that render them double-width. Fix: add font-family: inherit to .docs-content pre code so code elements inside pre blocks inherit the correct font from their parent.
69 lines
2 KiB
TypeScript
69 lines
2 KiB
TypeScript
import { codeToHtml } from "shiki";
|
|
|
|
export async function CodeBlock({
|
|
children,
|
|
title,
|
|
lang,
|
|
variant = "code",
|
|
}: {
|
|
children: string;
|
|
title?: string;
|
|
lang?: string;
|
|
variant?: "code" | "ascii";
|
|
}) {
|
|
const lineHeightClass =
|
|
variant === "ascii" ? "leading-[1.15]" : "leading-[1.45]";
|
|
|
|
if (lang && variant !== "ascii") {
|
|
const html = await codeToHtml(children, {
|
|
lang,
|
|
themes: { light: "github-light", dark: "github-dark" },
|
|
defaultColor: false,
|
|
});
|
|
|
|
return (
|
|
<div className="mb-4">
|
|
{title && (
|
|
<div className="text-[11px] font-mono text-muted px-4 py-1.5 bg-code-bg border border-border border-b-0 rounded-t-lg">
|
|
{title}
|
|
</div>
|
|
)}
|
|
<div
|
|
className={`[&_pre]:bg-code-bg [&_pre]:border [&_pre]:border-border [&_pre]:px-4 [&_pre]:py-3 [&_pre]:overflow-x-auto [&_pre]:text-[13px] [&_pre]:${lineHeightClass} [&_pre]:font-mono ${
|
|
title
|
|
? "[&_pre]:rounded-b-lg [&_pre]:border-t-0"
|
|
: "[&_pre]:rounded-lg"
|
|
} [&_code]:bg-transparent [&_code]:p-0`}
|
|
dangerouslySetInnerHTML={{ __html: html }}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="mb-4">
|
|
{title && (
|
|
<div className="text-[11px] font-mono text-muted px-4 py-1.5 bg-code-bg border border-border border-b-0 rounded-t-lg">
|
|
{title}
|
|
</div>
|
|
)}
|
|
<pre
|
|
className={`bg-code-bg border border-border px-4 py-3 overflow-x-auto text-[13px] ${lineHeightClass} ${
|
|
variant === "ascii" ? "" : "font-mono "
|
|
}${title ? "rounded-b-lg" : "rounded-lg"}`}
|
|
style={
|
|
variant === "ascii"
|
|
? {
|
|
fontFamily:
|
|
"Menlo, Monaco, Consolas, 'Courier New', monospace",
|
|
}
|
|
: undefined
|
|
}
|
|
>
|
|
<code style={variant === "ascii" ? { fontFamily: "inherit" } : undefined}>
|
|
{children}
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
);
|
|
}
|