mittwald Flow Logo

Components

Markdown

Die Markdown Component rendert Texteingaben im Markdown-Format.GitHub

Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque eius quam quas vel voluptas ullam aliquid fugit.

Playground

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

Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque eius quam quas vel voluptas ullam aliquid fugit.

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.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque eius quam quas vel voluptas ullam aliquid fugit.

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

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

Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque eius quam quas vel voluptas ullam aliquid fugit.

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

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

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

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6
import { Markdown } from "@mittwald/flow-react-components";

<Markdown>
  {
    "# Heading Level 1 \n## Heading Level 2 \n### Heading Level 3 \n#### Heading Level 4 \n##### Heading Level 5 \n###### Heading Level 6"
  }
</Markdown>

Bold und Italic

Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque eius quam quas vel voluptas ullam aliquid fugit.

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>

Unordered Lists

  • Unordered list item 1
  • Unordered list item 2
  • Unordered list item 3
import { Markdown } from "@mittwald/flow-react-components";

<Markdown>
  {
    "- Unordered list item 1 \n - Unordered list item 2  \n - Unordered list item 3"
  }
</Markdown>

Ordered Lists

  1. Ordered list item 1
  2. Ordered list item 2
  3. Ordered list item 3
import { Markdown } from "@mittwald/flow-react-components";

<Markdown>
  {
    "1. Ordered list item 1 \n 2. Ordered list item 2  \n 3. Ordered list item 3"
  }
</Markdown>

Quote

This is a quote

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

<Markdown>{"> This is a quote"}</Markdown>

Link

mittwald.de.

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

<Markdown>[mittwald.de](https://mittwald.de).</Markdown>

InlineCode

127.0.0.1

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

<Markdown>{"`127.0.0.1`"}</Markdown>

CodeBlock

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

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

<Markdown>
  {"```json\n" +
    "{\n" +
    '    "projectId": "b3a96db5-ba8f-40dd-9100-bab43ac1f698",\n' +
    '    "name": "My Project"\n' +
    "}\n" +
    "```\n"}
</Markdown>

Offset

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

Heading Level 1 -> 2

Heading Level 2 -> 3

Heading Level 3 -> 4

Heading Level 4 -> 5
Heading Level 5 -> 6
Heading Level 6 -> 6
import { Markdown } from "@mittwald/flow-react-components";

<Markdown headingOffset={1}>
  {
    "# Heading Level 1 -> 2 \n## Heading Level 2 -> 3 \n### Heading Level 3 -> 4 \n#### Heading Level 4 -> 5 \n##### Heading Level 5 -> 6 \n###### Heading Level 6 -> 6"
  }
</Markdown>

Overview