Kod
Vitt på svart som standard, grått med light. JetBrains Mono i 13 px med snittets egen radhöjd, som i Ghostty. Ett annat kodtypsnitt går att välja under inställningarna. Inga ligaturer.
I löptext
Ett namn, ett värde eller ett kortkommando i en mening.
Sätt data-code-font på roten. Sök med ⌘ K.
<code>--font-mono</code>
<kbd class="ws-kbd">⌘</kbd> <kbd class="ws-kbd">K</kbd>Block
Språket eller filen i huvudet, och en knapp som kopierar koden som den är skriven.
export function timmar(rader: Rad[], kund: string): number { return rader .filter((r) => r.kund === kund && r.datum >= "2026-09-01") .reduce((summa, r) => summa + r.timmar, 0);}<Code file="timmar.ts" code={kod} />Radnummer
Radnumren ritas och följer inte med när man kopierar. Markerade rader pekar ut det som texten handlar om.
export function timmar(rader: Rad[], kund: string): number { return rader .filter((r) => r.kund === kund && r.datum >= "2026-09-01") .reduce((summa, r) => summa + r.timmar, 0);}<Code lang="TypeScript" lines mark={[3]} code={kod} />Terminal
Varje rad är ett kommando. Prompten ritas och kopieras inte.
bun add @whitespace/malm-uibun run check:all<Code lang="Terminal" shell code={kommandon} />Ändringar
Plus och minus står kvar i texten, så betydelsen vilar aldrig på färgen.
.ws-notice--warning {− background: var(--color-yellow-10);+ background: var(--color-govuk-yellow-tint-50); color: var(--color-warn-on-soft); }<Code lang="CSS" diff code={ändring} />Radbrytning
Långa rader rullar i sidled. Med wrap bryts de i stället, för en logg eller ett felmeddelande.
2026-09-26 14:02:11 FEL Synkningen mot FreeScout avbröts: anslutningen stängdes av servern efter 30 sekunder utan svar (ORBIT-4804, försök 3 av 3)<Code lang="Logg" wrap code={logg} />Ljust
Kod är vitt på svart som standard, som en terminal. Med light blir blocket grått på sidans egna färger, för kod i en löpande text. Terminalexempel finns under Brands.
export function timmar(rader: Rad[], kund: string): number { return rader .filter((r) => r.kund === kund && r.datum >= "2026-09-01") .reduce((summa, r) => summa + r.timmar, 0);}<Code file="timmar.ts" light code={kod} />Text i ett block
Text som inte är kod — en prompt, det en modell svarade, en nyckel att kopiera — hålls ihop som ett block men sätts som text, i sans och radbruten. Med scroll rullar ett långt block inom en egen höjd.
Du skriver en månadsrapport för goteborg.se. Använd bara de uppgifter som står nedan, och skriv inget om orsaker som uppgifterna inte visar.Besök i september: 1 204 118, mot 1 187 402 i augusti.Sidan /sv/parkering hade 38 % fler besök än i augusti.<Code lang="Prompt" light class="ws-code--prose ws-code--scroll" code={prompt} />