CodeBlock

Example#

Volume

Paper

Colourway

app/globals.csscss

@layer theme, base, mk, site, components, utilities;
@import "@maxgrits/overprint-react/css";

Live render of examples/code-block/basic.tsx

Usage#

Use a code block for code people read or copy: an install command, a component example, a config file. It prints in the code face, the one place the system uses a monospaced family (D-D9), with a header holding the file name, the language and a copy key.

Highlighting runs where the code is built (the docs use Shiki's CSS-variables theme mapped to the --mk-code-* roles); the component carries no highlighter. Pass code as a string for plain text.
Options. title (a file name), lineNumbers, highlight for lines to mark, wrap (off by default: code scrolls sideways) and copy (on by default).
Inline code in a sentence is a code element inside Prose, not a block.

Anatomy#

app/globals.csscss

@layer theme, base, mk, site, components, utilities;
@import "@maxgrits/overprint-react/css";

Headerdata-mk-part="header"
File nameLabel role..mk-code-title
CodeA focusable region that scrolls sideways..mk-code-pre

Volume#

Reading layer: identical at every volume.

Quiet

app/globals.csscss

@layer theme, base, mk, site, components, utilities;
@import "@maxgrits/overprint-react/css";

Docs, forms, legal and long reads. Flat inks, no art in motion.

Studio
app/globals.csscss
```
@layer theme, base, mk, site, components, utilities;
@import "@maxgrits/overprint-react/css";
```
The site default. Art on its own plates, one display moment per view.
Press
app/globals.csscss
```
@layer theme, base, mk, site, components, utilities;
@import "@maxgrits/overprint-react/css";
```
Hero moments, covers and campaigns. Halftone fields and the second ink.
Rave
app/globals.csscss
```
@layer theme, base, mk, site, components, utilities;
@import "@maxgrits/overprint-react/css";
```
Launches, posters and the 404. Every ink, and the words still win.

Content#

Show code that runs as written; mark a placeholder clearly, such as YOUR_TOKEN.
One task per block; title it with the file it belongs in.
Never put a real token, key or address in an example.

Do and don't#

app/globals.csscss

@import "@maxgrits/overprint-react/css";

A titled, runnable snippet.

Don't

bash

export GITHUB_PACKAGES_TOKEN=ghp_a1b2c3d4e5f6
pnpm install

A token pasted into an example.

People copy code blocks whole. A real-looking secret in an example gets pasted into terminals, commits and screenshots.

Accessibility#

The scrolling pre is a focusable region named "{title} code".
The copy key says "Copied" for 2 s and announces it politely.

Props#

Prop	Type	Default	Description
`code`	`string`	none	Plain source.
`children`	`ReactNode`	none	Pre-highlighted tokens (or a `<code>` element) from the docs pipeline.
`lang`	`string`	none
`title`	`string`	none	A file name.
`lineNumbers`	`boolean`	none
`highlight`	`readonly number[]`	none	1-based lines to mark.
`wrap`	`boolean`	`false`	Default false: long lines scroll.
`copy`	`boolean`	`true`	Default true.
`regionLabel`	`string`	`"Code"`	The scroll region's name when there is no title (default "Code").

Plus 277 React and DOM attributes passed through to the root element (className, ref, aria-*, event handlers and the rest). Generated from CodeBlockProps in packages/overprint-react/src/reading/code-block/code-block.tsx.

Tokens#

System tokens (19)

Scanned from its CSS at build and checked against its registry entry; 9 read but not declared there.

Changelog#

Arrived in 0.1.0.

0.1.024 October 2026

MinorreactSection with its plate and Art slot, Plate, VolumeScope, PageHero, SectionHead, Eyebrow, Card, LineCard, InfoPanel, Stack, Cluster, Grid, Container, Main, Rule and the FittedLine client fitter; Navbar with the NavDisclosure mega panels, Footer, FooterMap, BuildStamp, SkipLink, ActionDock and VisitorControls; the Table parts, ComparisonTable with the one-tier switcher, SpecStrip, Numeral, Stat, StatGroup, StatusChip, Badge and ScoreDial; Prose with mdxComponents, Quote, CodeBlock with CopyButton, Figure, ScreenshotFrame and PhoneFrame; and the brand: the three evolved 2 × 2 options in markGeometry (a Overprint by default, b Paper seam, c Key block) with the pixel-snapped px mode and the one-ink seam variant, logoGeometry with the 1x clear-space frame, Mark, Wordmark, Logo, MaxosMark and LineBadge. Read the whole entry
PatchreactSegmentedControl, Tabs and CodeBlock draw LC-05's ring outside the focused key (2 px at 2 px) instead of inset; RadioGroup and CheckboxGroup keys and cards, VolumeDial stops and link Cards mark the element that draws the ring (data-mk-focus-ring); a focusable VisuallyHidden draws the ring. Read the whole entry