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}

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}

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"
}

{
    "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.