Components

CodeBlock

Der CodeBlock dient der übersichtlichen Darstellung von Code als Block mit Syntax-Highlighting.GitHub
{
    "projectId": "b3a96db5-ba8f-40dd-9100-bab43ac1f698",
    "name": "My Project"
}

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}

Mit Children

Um den Inhalt des CodeBlocks frei gestalten zu können, gibt es die Möglichkeit anstatt des code Properties Children zu nutzen.

Lorem ipsum dolor sit amet consectetur adipisicing elit.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Lorem ipsum dolor sit amet consectetur adipisicing elit.

Overview