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


## Develop

# Properties

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `code` | `string` | - | - |
| `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 ...` | - | - |
| `showLineNumbers` | `boolean` | - | - |
| `copyable` | `boolean` | - | - |


## Guidelines

# Grundlagen

## Best practices

Achte bei der Verwendung vom CodeBlock darauf, dass ...

- er nur genutzt wird, wenn der Inhalt länger als eine Zeile ist.
- bei langen Inhalten Zeilennummern verwendet werden, um die Orientierung zu
  verbessern.
- der Inhalt nur dann kopierbar ist, wenn er sinnvoll an anderer Stelle
  weiterverwendet werden kann.

## Verwendung

Verwende den CodeBlock, um ...

- Code-Beispiele übersichtlich und mit dem richtigen Syntax-Highlighting
  darzustellen.
- dem User eine einfache Möglichkeit zu bieten, Code-Snippets zu kopieren.
- umfangreiche Error-Logs übersichtlich anzuzeigen.