Code block
Code card with filename, Code | Diff toggle and Copy; gutter line numbers and keyword / string tinting from the --code-* tokens. No highlighter dependency.
Preview
Use the controls to explore the component's props.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
code (required) | string | — | Source; split on newlines. |
filename | ReactNode | — | Header label. |
diff | { type?: "add" | "remove", text }[] | — | Enables the Diff view. |
view / defaultView / onViewChange | "code" | "diff" | — | Controlled or uncontrolled. |
onCopy | (code) => void | — | Copy button. |
keywords | string[] | — | Extra keywords to tint. |
Example
churn.ts
1export async function churnBatch() {2 const flavor = await getFlavor("pistachio");3 const base = await dairy.fetch({ flavor });4 await freezer.store(base, { temp: "-16C" });5 if (!base.approved) return null;6 return base.gallons;7}
import { CodeBlock } from "@exegia/corpora-ui"
<CodeBlock filename="churn.ts" code={source} onCopy={copy} />Last updated on