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.

WebBêtaBlocs

Web uniquement — React, depuis @krizaka/ui/code-block. Bêta : son API peut encore changer à une version mineure.

Pourquoi il est là. Used by krizaka.com.

Quand l’utiliser

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

Quand ne pas l’utiliser

For a word of code inside a sentence: use Ticks from the page entry.À la place : Page
For a keyboard shortcut.À la place : Kbd

Installation

Installer

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

Styles

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

Importer

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

Exemples

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	Défaut	Description
`code`requis	`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	Défaut	Description
`label`requis	`string`	—	What the tabs choose between (`Build tool`): the tab list's accessible name.
`tabs`requis	`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.

Accessibilité

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).

Clavier

Touches	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).

Bonnes pratiques

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).

Générée depuis le code de @krizaka/ui 3.18.2 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub