/// Typography

CodeBlock

Monospace code panel — sunken surface, hairline border, and an optional title bar.

import { CodeBlock, CodeComment, CodeLiteral } from "@protocore/pds";

View as Markdown

Basics

CodeBlock renders a multi-line snippet on a sunken surface with a hairline border. Pass a string as children.

pnpm add @protocore/pds
# then import the tokens once at your root
import "@protocore/pds/styles.css";

Comments & literals

CodeComment renders muted; CodeLiteral is the one accent moment in the panel — the numeric literal is the only place green appears here.

// send a message to another network
endpoint.send(dstEid, message, { gas: 200000, refund: msg.sender });

Titled panel

title adds a mono title bar above the code — a file name or context label.

OApp.sol

// require DVN confirmations before delivery
endpoint.setConfig(eid, dvn, { confirmations: 15 });

When to use it

Use CodeBlock for any multi-line snippet, command, or config the reader might copy — install steps, contract calls, JSON payloads. The optional title bar labels it with a file name or context.

For a single inline token inside a sentence, use Code instead — a sunken chip in the text flow. CodeBlock deliberately does no syntax highlighting; instead it exposes two spans you place by hand: CodeComment (muted) and CodeLiteral (accent). Keep CodeLiteral to the genuinely notable value — a gas figure, a confirmation count — so the accent stays meaningful, mirroring the one-accent discipline of SignalCount.

Guidelines

Use it for multi-line, copyable snippets and commands.
Add a `title` to name the file or context.
Wrap explanatory comments in `CodeComment`.
Reserve `CodeLiteral` for the one value worth highlighting.

Don't

Don't use it for a single inline token — that is `Code`.
Don't paint every value with `CodeLiteral`; the accent is a budget.
Don't hand-roll a scrolling wrapper — the panel handles overflow.
Don't put keyboard shortcuts in it — those are `Kbd`.

Accessibility

Renders a semantic `<pre><code>` structure, preserving whitespace and line breaks for screen readers.
`CodeComment` and `CodeLiteral` are purely visual spans — meaning lives in the code text, not the colour.
Long lines scroll horizontally inside the panel so the page body never scrolls sideways.

`CodeBlock` props

Prop	Type	Default	Description
`children`	`ReactNode`	—	Code content — a string, or nodes using `CodeComment` / `CodeLiteral`.
`className`	`string`	—
`style`	`CSSProperties`	—
`title`	`ReactNode`	—	Optional title-bar label (mono) rendered above the code.