Code block

A code sample: its language and file name, the code highlighted by TanStack Highlight on the tokens (TS, TSX, JS, JSON, YAML, Bash, HTML, CSS, Java, Kotlin, diff — it scrolls sideways, never shrinks), numbered lines, lines set apart (highlighted, added, removed, in focus) and a copy button that says it copied — CodeTabs puts several build tools side by side.

WebBetaBlocks

Web only — React, from @krizaka/ui/code-block. Beta: its API may still change in a minor version.

Why it is here. Used by krizaka.com.

When to use

Installation lines, a configuration file, the few lines a reader copies to start.
The same thing in Maven, Gradle and npm (CodeTabs).

When not to use

For a word of code inside a sentence: use Ticks from the page entry.Use instead: Page
For a keyboard shortcut.Use instead: Kbd

Installation

Install

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { CodeBlock, CodeTabs, highlight, normalizeCodeLanguage } from "@krizaka/ui/code-block";

Examples

A file

A YAML sample in its file, with a comment and the copy button.

yamlapplication.yml

spring:
  application:
    name: billing # one name, used by logs and traces
krizaka:
  messaging:
    dead-letter: true

Numbered, annotated lines

A TypeScript sample with numbered lines: one in focus (the rest dimmed), one added.

tsvideos.ts

export async function loadVideos(signal: AbortSignal) {
  const response = await fetch("/api/videos", { signal });
  if (!response.ok) throw new Error("Could not load the videos");
  return response.json();
}

Build tools

CodeTabs: Maven and Gradle side by side.

xmlpom.xml

<parent>
  <groupId>com.krizaka</groupId>
  <artifactId>krizaka-parent</artifactId>
  <version>0.1.0</version>
</parent>

Props

CodeBlock

A code sample: language and file name, highlighted code that scrolls sideways, a copy button.

Prop	Type	Default	Description
`code`required	`string`	—	The code, as it is copied.
`annotations`	`readonly CodeAnnotation[]`	—	Lines set apart: `highlight`, `added`, `removed`, `error`, `warning`, `dim`, or `focus` (all the others are dimmed).
`copiedLabel`	`string`	—	What the button says once the code is copied (announced politely).
`copyLabel`	`string`	—	The copy button's words, passed translated. Without them there is no copy button (a sample inside a text, say).
`file`	`ReactNode`	—	The file it belongs in (`pom.xml`, `application.yml`), or what it is (`Terminal`).
`highlight`	`boolean`	`true`	Colours comments, strings, keywords, types, tags and numbers (the tokens' roles).
`language`	`string`	`text`	Its language, shown as a tag and used by the highlighter: `ts`, `tsx`, `js`, `jsx`, `json`, `yaml`, `bash`, `html` (`xml`), `css`, `java`, `kotlin`, `diff`, `properties`. Another one is shown as plain text.
`lineNumbers`	`boolean`	—	A number before every line.

CodeTabs

Several ways to write the same thing (Maven · Gradle · npm): segmented tabs above code samples.

Prop	Type	Default	Description
`label`required	`string`	—	What the tabs choose between (`Build tool`): the tab list's accessible name.
`tabs`required	`readonly { id: string; label: ReactNode; content: ReactNode; }[]`	—	The ways to write it: an id, the tab's words, its sample (a `CodeBlock`).
`defaultValue`	`string`	—	The tab open at first. Defaults to the first one.

Accessibility

A figure whose caption is the file name; the button's label changes to the copied words in a polite live region.
The colours of the highlighter are the tokens' text roles (≥ 4.5:1 on the code surface, both themes); a line set apart never relies on colour alone (added and removed carry a + / − mark, focus greys the other lines to the quiet text role).

Keyboard

Keys	Action
`Tab`	Focuses the code, which then scrolls with the arrow keys; then the copy button.
`Arrow keys`	In CodeTabs, move between the tabs (Radix Tabs).

Best practices

Show the file the lines belong in (pom.xml, application.yml); Terminal for a command.
Keep samples short enough to copy whole; link to the full file instead of pasting it.
Set lines apart with annotations (focus greys the rest, added / removed for a change, highlight for the line to read); number them with lineNumbers when the text refers to a line.
Name the language (ts, bash, yaml, java…); an unknown one is shown as plain text, never an error. The same grammars colour the code of Markdown.
The copy words arrive as props (copyLabel, copiedLabel).

Generated from the code of @krizaka/ui 3.8.0: its meta.ts, its examples and its types.Edit this documentation on GitHub