# CodeBlock

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

## Overview

# Playground

Verwende `<CodeBlock />`, um einen CodeBlock anzuzeigen. Gib den anzuzeigenden
Inhalt im `code` Property an. Nutze das `language` Property, um die
Programmiersprache (siehe
[unterstütze language imports](https://github.com/mittwald/flow/tree/main/packages/components/src/components/CodeEditor/languages/all.ts))
zu definieren. So erhält der Code das korrekte Syntax-Highlighting.

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

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

---

# 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

Ergänzt man das Property `copyable`, so bekommt 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>
```