‍

Components

Integrations

Markdown

Die Markdown Component rendert Texteingaben im Markdown-Format.
GitHub‍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>
  Lorem ipsum dolor sit amet **consectetur adipisicing**
  elit. Cumque eius *quam quas vel voluptas* ullam aliquid
  ***fugit***.
</Markdown>

Best Practices

  • Nutze Markdown vor allem für dynamische oder nutzergenerierte Texteingaben.
  • Verwende für mehr Kontrolle über Layout und semantische Elemente stattdessen Text‍. Markdown wird als HTML ohne explizite Kontrolle über Elemente wie <p> oder <h1> gerendert.

Color

Zusätzlich zur Standard-Color kann Markdown in Light und Dark dargestellt werden, wenn die Standard-Color auf farbigen oder dekorativen Hintergründen nicht gut funktioniert. Wann welche Color passt, beschreibt Color‍.

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.

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

PropertyTypeDescription
color
default (default) | dark | light | dark-static | light-static
The color schema of the markdown component.
headingOffset
numberdefault: 0
Shifts all heading levels by the given offset.
components
Components
Allows overriding markdown element renderers from outside.
ref
Ref<HTMLDivElement>
A ref to the elements root.
className
string
The elements class name.
children
ReactNode
Markdown.
allowElement
AllowElement
Filter elements (optional); `allowedElements` / `disallowedElements` is used first.
allowedElements
readonly string[]
Tag names to allow (default: all tag names); cannot combine w/ `disallowedElements`.
disallowedElements
readonly string[]
Tag names to disallow (default: `[]`); cannot combine w/ `allowedElements`.
rehypePlugins
PluggableList
List of rehype plugins to use.
remarkPlugins
PluggableList
List of remark plugins to use.
remarkRehypeOptions
Readonly<Options>
Options to pass through to `remark-rehype`.
skipHtml
boolean
Ignore HTML in markdown completely (default: `false`).
unwrapDisallowed
boolean
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.
urlTransform
UrlTransform
Change URLs (default: `defaultUrlTransform`)

Auf dieser Seite