Markdown

Die Markdown Component rendert Texteingaben im Markdown-Format.
GitHubMarkdown

Grundlagen

Markdown ist besonders nützlich in Situationen, in denen Texteingaben von Usern geliefert werden. Die Ausgabe wird als HTML gerendert, jedoch ohne explizite Kontrolle über semantische Elemente wie z. B. <p> oder <h1>. Für mehr Kontrolle über das Layout sollte Text verwendet werden.

Best Practices

Achte bei der Verwendung von Markdown darauf, dass sie hauptsächlich für dynamische oder nutzergenerierte Texteingaben (z. B. im Chat) genutzt wird.

Verwendung

Verwende Markdown, um Texte im Markdown-Format korrekt darzustellen. Dieses Format wird z. B. häufig von Usern in Kommentarfunktionen oder Chats genutzt.

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.

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

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

Bold und Italic

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

Unordered Lists

  • Unordered list item 1
  • Unordered list item 2
  • Unordered list item 3

Ordered Lists

  1. Ordered list item 1
  2. Ordered list item 2
  3. Ordered list item 3

Quote

This is a quote

Link

mittwald.de.

InlineCode

127.0.0.1

CodeBlock

Table

Column 1Column 2
Row 1 Cell 1Row 1 Cell 2
Row 2 Cell 1Row 2 Cell 2

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

Properties

PropertyTypeDefaultDescription
color"default" | "dark" | "light" | "dark-static" | "light-static""default"The color schema of the markdown component.
headingOffsetnumber0Shifts all heading levels by the given offset.
componentsComponents-Allows overriding markdown element renderers from outside.
refRef<HTMLDivElement>-
classNamestring-The elements class name.
childrenReactNode-Markdown.
allowElementAllowElement-Filter elements (optional); `allowedElements` / `disallowedElements` is used first.
allowedElementsreadonly string[]-Tag names to allow (default: all tag names); cannot combine w/ `disallowedElements`.
disallowedElementsreadonly string[]-Tag names to disallow (default: `[]`); cannot combine w/ `allowedElements`.
rehypePluginsPluggableList-List of rehype plugins to use.
remarkPluginsPluggableList-List of remark plugins to use.
remarkRehypeOptionsReadonly<Options>-Options to pass through to `remark-rehype`.
skipHtmlboolean-Ignore HTML in markdown completely (default: `false`).
unwrapDisallowedboolean-Extract (unwrap) what’s in disallowed elements (default: `false`); normally when say `strong` is not allowed, it and it’s children are dropped, with `unwrapDisallowed` the element itself is replaced by its children.
urlTransformUrlTransform-Change URLs (default: `defaultUrlTransform`)

Auf dieser Seite