Code block
Warm-light code, tool payloads, and diffs with exact-source copying and line numbers.
-- Filings due this quarter
SELECT entity, filing, due_date
FROM filings
WHERE due_date < '2027-01-01'
AND status = 'not_started'
ORDER BY due_date;
Usage
import { CodeBlock } from '@commenda/pathfinder/code-block';
import '@commenda/pathfinder/styles.css';
import '@commenda/pathfinder/code-font.css';
<CodeBlock code={source} language="sql" filename="q3_filings.sql" />;Load compiled CSS once in your application. The optional code-font stylesheet supplies Geist Mono; without it, the component uses the host's monospace fallback. No app-side Tailwind compilation or syntax stylesheet is needed.
Examples
Tool request and response
Pass the original payload string when exact formatting matters. The component does not parse, prettify, or execute it.
{
"request": {
"entity": "Meridian Labs Inc.",
"status": "not_started"
},
"response": {
"count": 2,
"filings": [
"TX sales tax Q3",
"DE franchise tax"
]
}
}
Diff
Mark one-based source line positions. The original code remains unchanged, including when copied. Added and removed lines have both a background and a gutter marker.
{
"state": "TX",
Removed: "status": "pending",
Added: "status": "active",
"permit": "3-20-1234567-8"
}
Plain text and unknown languages
Unsupported languages fall back to readable plain text. Line numbers can be hidden.
Unknown languages remain readable.\n Whitespace is preserved.
API reference
| Prop | Type | Behavior |
|---|---|---|
codeRequired | string | Required source; copying preserves whitespace and trailing newlines |
language | string | text; Highlight.js common languages and aliases |
filename | string | Optional header label; long names truncate with full native title |
variant | "code"|"payload"|"diff" | code |
lineNumberConfig | ObjectView fields | Visible, starts at 1 |
showLineNumbers | boolean | Compatibility prop; explicit lineNumberConfig.visible wins |
diffConfig | ObjectView fields | One-based source line positions, independent of displayed starting number |
copyConfig | CodeCopyConfigView fields | Copy enabled by default |
lineNumberConfigObject fields
| Field | Type | Requirement |
|---|---|---|
visible | boolean | Optional |
start | number | Optional |
diffConfigObject fields
| Field | Type | Requirement |
|---|---|---|
added | readonly number[] | Optional |
removed | readonly number[] | Optional |
copyConfigObject fields
| Field | Type | Requirement |
|---|---|---|
enabled | boolean | Optional |
label | string | Optional |
copiedLabel | string | Optional |
errorLabel | string | Optional |
onCopy | (() => void) | Optional |
onError | ((error: Error) => void) | Optional |
CodeCopyConfig supports enabled, label, copiedLabel, errorLabel, onCopy, and onError(error). Clipboard failure is announced and remains retryable; the success indicator resets after two seconds. Callbacks run after the clipboard outcome.
Design and accessibility rules
- CODE-01: White surface, pearl-300 hairline, radius 8, 32px header, 12px body inset, Geist Mono 10/16 without ligatures.
- CODE-02: Show line numbers by default. Long source scrolls horizontally; never truncate or collapse code silently.
- CODE-03: Copy excludes labels and the gutter. Diff meaning must not rely on color alone.
- CODE-04: Payloads remain inert source; unknown languages still render. Highlighting loads after mount and does not block initial content.
- The scroll region is keyboard-focusable. Clipboard outcomes use a polite status announcement.
Migration notes
Existing code, language, and showLineNumbers values can be reused. Replace compound CodeBlock header/copy children with filename and copyConfig. This is a documented future migration path; no existing consumers are changed. The renderer uses Lowlight/Highlight.js, not Shiki. See the AI content integration guide.