CodeBlock

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.

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.

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.

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.

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.

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.

Properties