CodeBlock

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) zu definieren. So erhält der Code das korrekte Syntax-Highlighting.

{
    "projectId": "b3a96db5-ba8f-40dd-9100-bab43ac1f698",
    "name": "My Project"
}

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.

1{
2    "projectId": "b3a96db5-ba8f-40dd-9100-bab43ac1f698",
3    "name": "My Project"
4}

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.

1{
2    "projectId": "b3a96db5-ba8f-40dd-9100-bab43ac1f698",
3    "name": "My Project"
4}

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

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

Color

Zusätzlich zur Standard-Color kann der CodeBlock auch in den Colors Light und Dark dargestellt werden. Beide Colors sind Alternativen zur Standard-Color, falls diese nicht auf farbigen oder dekorativen Hintergründen funktioniert.

{
    "projectId": "b3a96db5-ba8f-40dd-9100-bab43ac1f698",
    "name": "My Project"
}

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

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

{
    "projectId": "b3a96db5-ba8f-40dd-9100-bab43ac1f698",
    "name": "My Project"
}

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

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

Light: Verwende die Light-Color bei dunklen Hintergründen mit einem HSL Lightness-Wert von weniger als 50.

Dark: Verwende die Dark-Color bei hellen, farbigen Hintergründen mit einem HSL Lightness-Wert von größer als 50.