# 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" \| "cfg" \| "cjs" \| "cl" \| "clj" \| "cljc" \| "cljs" \| "cljx" \| "cmake" \| "cmake.in" \| "cob" \| "coffee" \| "cpp" \| "cpy" \| "cql" \| "cr" \| "cs" \| "css" \| "cts" \| "cxx" \| "cyp" \| "cypher" \| "dart" \| "diff" \| "dtd" \| "dyalog" \| "dyl" \| "dylan" \| "e" \| "ecl" \| "edn" \| "el" \| "elm" \| "erl" \| "f" \| "f77" \| "f90" \| "f95" \| "factor" \| "feature" \| "for" \| "forth" \| "fs" \| "fth" \| "fun" \| "gradle" \| "groovy" \| "gss" \| "h" \| "h++" \| "handlebars" \| "hbs" \| "hh" \| "hpp" \| "hs" \| "htm" \| "hx" \| "hxml" \| "hxx" \| "ini" \| "ino" \| "intr" \| "j2" \| "jade" \| "java" \| "jinja" \| "jinja2" \| "jl" \| "js" \| "json" \| "jsonld" \| "jsx" \| "ksh" \| "kt" \| "kts" \| "less" \| "liquid" \| "lisp" \| "ls" \| "ltx" \| "lua" \| "mbox" \| "md" \| "mjs" \| "mkd" \| "ml" \| "mli" \| "mll" \| "mly" \| "mm" \| "mo" \| "mps" \| "mrc" \| "msc" \| "mscgen" \| "mscin" \| "msgenny" \| "mts" \| "nb" \| "nix" \| "nq" \| "nsh" \| "nsi" \| "nt" \| "nut" \| "oz" \| "pas" \| "patch" \| "pgp" \| "php" \| "php3" \| "php4" \| "php5" \| "php7" \| "phtml" \| "pig" \| "pl" \| "pls" \| "pm" \| "pp" \| "pro" \| "properties" \| "proto" \| "ps1" \| "psd1" \| "psm1" \| "pug" \| "pxd" \| "pxi" \| "py" \| "pyw" \| "pyx" \| "R" \| "rb" \| "rq" \| "rs" \| "sas" \| "sass" \| "scala" \| "scm" \| "scss" \| "sh" \| "sieve" \| "sig" \| "siv" \| "smackspec" \| "sml" \| "solidity" \| "sparql" \| "spec" \| "sql" \| "ss" \| "st" \| "styl" \| "sv" \| "svelte" \| "svh" \| "swift" \| "tcl" \| "tex" \| "textile" \| "toml" \| "ts" \| "tsx" \| "ttcn" \| "ttcn3" \| "ttcnpp" \| "ttl" \| "v" \| "vb" \| "vbs" \| "vhd" \| "vhdl" \| "vtl" \| "vue" \| "wast" \| "wat" \| "webidl" \| "wl" \| "wls" \| "xml" \| "xq" \| "xqm" \| "xquery" \| "xqy" \| "xsd" \| "xsl" \| "xu" \| "xy" \| "yaml" \| "yml" \| "ys" \| "z80" \| "dotEnv"` | - | 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. |