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
- Ordered list item 1
- Ordered list item 2
- Ordered list item 3
Quote
This is a quote
Link
InlineCode
127.0.0.1
CodeBlock
Table
| Column 1 | Column 2 |
|---|---|
| Row 1 Cell 1 | Row 1 Cell 2 |
| Row 2 Cell 1 | Row 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
| Property | Type | Default | Description |
|---|---|---|---|
color | "default" | "dark" | "light" | "dark-static" | "light-static" | "default" | The color schema of the markdown component. |
headingOffset | number | 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`) |