CodeBlock

Der CodeBlock dient der übersichtlichen Darstellung von Code als Block mit Syntax-Highlighting.

import { CodeBlock } from "@mittwald/flow-react-components";

<CodeBlock
  language="json"
  code={`{
  "projectId": "b3a96db5-ba8f-40dd-9100-bab43ac1f698",
  "name": "My Project"
}`}
/>

Best Practices

Nutze den CodeBlock nur für Inhalte, die länger als eine Zeile sind.
Zeige bei langen Inhalten Zeilennummern an. Das verbessert die Orientierung.
Mach den Inhalt nur kopierbar, wenn er sich an anderer Stelle weiterverwenden lässt.

Mit Zeilennummern

Wird das showLineNumbers Property gesetzt, werden Zeilennummern angezeigt.

Mit Kopierfunktion

Mit dem Property copyable erhält der CodeBlock eine Kopierfunktion. Dadurch kann der User den gesamten Inhalt des CodeBlocks in die Zwischenablage kopieren. Eventuelle Zeilennummern werden nicht mit kopiert.

Mehr anzeigen

Über die Property truncateLines lässt sich die Höhe des CodeBlocks begrenzen. Ist sie true, wird der Inhalt nach dem Standardwert gekürzt. Bei einer Zahl erfolgt die Kürzung nach der angegebenen Zeilenanzahl. Überschreitet der Code diese Länge, erscheint automatisch ein „Mehr anzeigen“-Button.

Mit Children

Um den Inhalt des CodeBlocks frei gestalten zu können, gibt es die Möglichkeit anstatt des code Properties Children zu nutzen.

Lorem ipsum dolor sit amet consectetur adipisicing elit.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Lorem ipsum dolor sit amet consectetur adipisicing elit.

Properties

Property	Type	Description
`code`	string	The code displayed in the block.
`truncateLines`	number \| booleandefault: false	Controls truncation of long code blocks. `false` disables it, `true` truncates after 8 lines, and a number sets the maximum line count.
`className`	string	The elements class name.
`children`	ReactNode
`language`	text \| go \| p \| b \| html \| map \| q \| s \| svg \| m \| markdown \| d \| in \| r \| apl \| asc \| asn \| asn1 \| bash \| bf \| BUILD \| bzl \| c \| c++ \| cc \| ... 193 more ...	The language the code is highlighted as.
`copyable`	booleandefault: true	Whether a button to copy the code to the clipboard is shown.
`showLineNumbers`	booleandefault: true	Whether line numbers are shown in the gutter.

Components

Integrations