‍

Components

Integrations

Markdown

Die Markdown Component rendert Texteingaben im Markdown-Format.

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
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`.
children
ReactNode
Markdown.
className
string
The elements class name.
color
default (default) | dark | light | dark-static | light-static
The color schema of the markdown component.
components
Components
Allows overriding markdown element renderers from outside.
disallowedElements
readonly string[]
Tag names to disallow (default: `[]`); cannot combine w/ `allowedElements`.
headingOffset
numberdefault: 0
Shifts all heading levels by the given offset.
ref
Ref<HTMLDivElement>
A ref to the elements root.
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