Playground

Um eine Texteingabe als Markdown zu rendern, schließe sie mit dem <Markdown />-Tag ein.

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

<Markdown>
  Lorem ipsum dolor sit amet **consectetur adipisicing**
  elit. Cumque eius *quam quas vel voluptas* ullam aliquid
  ***fugit***.
</Markdown>

Color

Zusätzlich zur Standard-Color kann Markdown 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.

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.

Unterstützte Syntax

Headings

Bold und Italic

Unordered Lists

Ordered Lists

Quote

Link

InlineCode

CodeBlock

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

Offset

Das Property headingOffset verschiebt alle Überschriften um den angegebenen Offset.