Code block

Code or data set in mono on a recessed sheet, with line numbers, highlighting and a copy button.

npx shadcn add @patina/code-block

The observation

observation.json

JSON

{  "id": "obs-2026-11-14-0412",  "observer": "Mira Okafor",  "site": "North reed bed",  "seen": "2026-11-14T16:38:00Z",  "species": "Cetti's warbler",  "scientific": "Cettia cetti",  "confidence": 0.82,  "evidence": ["call", "habitat", "season"],  "attachments": ["reedbed-dusk.m4a", "reedbed-dusk.jpg"],  "reviewed": false}

A print, from code

plate.ts

TypeScript

import { print } from "@/patina/ink"
// Same seed, same plate, in every build.const { svg } = print({  motif: "horizon",  seed: "obs-2026-11-14-0412",  inks: "field",  inks: "patina",})
const plate = document.querySelector("#plate")plate?.insertAdjacentHTML("beforeend", svg)

Seeded · same output everywhere

Variants

Shell, small

npx shadcn add @patina/code-block

Destructive

npm run dev

Error: unknown motif "heron"
    at print (src/patina/ink/print-svg.ts:41:22)
    at plate (src/site/fieldbook/plate.ts:12:3)

Wrapped

curl -s "https://fieldbook.example/api/observations?site=north-reed-bed&species=cettia-cetti&from=2026-11-01"