Code-Block

Code mit Shiki-Highlighting, Dateiname, Zeilennummern und markierten Zeilen. Beide Themes entstehen aus den semantischen Farb-Tokens und wechseln mit dem Erscheinungsbild; der Copy-Button bestätigt den Erfolg sichtbar mit einem Häkchen. CodeTabs zeigt mehrere Dateien in Reitern, die per Tastatur bedienbar sind.

Highlighting und Zeilennummern

Shiki hebt den Code mit den semantischen Farb-Tokens in Light und Dark hervor. Zeilennummern, markierte Zeilen und der Copy-Button mit Erfolgs-Häkchen sind optional.

use-accent.tstypescript

import { useTheme } from './theme';

export function useAccent() {
  const theme = useTheme();

  return theme.accent;
}

Mehrere Dateien

CodeTabs verbindet die Tabs aus dem Basis-Katalog mit je einem Code-Block. Die Reiter lassen sich wie gewohnt per Pfeiltasten, Home und End bedienen.

tsx

import { Card } from '@lukasfend/ui/components/card';

export default function Page() {
  return (
    <main className="p-6">
      <Card>Tagesübersicht</Card>
    </main>
  );
}

Ohne Kopieren und ohne Dateiname

Ohne Dateiname und mit copy={false} bleibt nur die Code-Fläche; praktisch für kurze Shell-Befehle in Fließtextnähe.

pnpm install
pnpm dev --filter docs

Playground

Dateiname, Zeilennummern, markierte Zeilen und der Copy-Button lassen sich hier direkt umschalten.

Dateiname

Zeilennummern

Kopieren

Markierte Zeilen

use-accent.tstypescript

import { useTheme } from './theme';

export function useAccent() {
  const theme = useTheme();

  return theme.accent;
}