# CodeBlock

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

```tsx
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.

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

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

---

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

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

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

---

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

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

<CodeBlock
  language="json"
  truncateLines={4}
  code={`{
  "projectId": "b3a96db5-ba8f-40dd-9100-bab43ac1f698",
  "name": "My Project"
  "createdAt": "2025-08-25T06:11:21.000Z",
  "enabled": true,
  "status": "ready",
  "serverId": "830d3c18-2d32-4768-b6a0-7e8b424a1271",
  "serverShortId": "s-123456",
}`}
/>
```

---

# Mit Children

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

```tsx
import {
  CodeBlock,
  Color,
} from "@mittwald/flow-react-components";

<CodeBlock>
  Lorem ipsum dolor sit amet consectetur adipisicing elit.
  <br />
  <Color color="danger">
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
  </Color>
  <br />
  Lorem ipsum dolor sit amet consectetur adipisicing elit.
</CodeBlock>
```

---

# Properties

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `code` | `string` | - | The code displayed in the block. |
| `truncateLines` | `number \| boolean` | `: 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` | `boolean` | `true` | Whether a button to copy the code to the clipboard is shown. |
| `showLineNumbers` | `boolean` | `true` | Whether line numbers are shown in the gutter. |