ReflexKR

Die Komponentenwerkstatt: Reflex' 100 Bibliotheksbausteine

Kursüberblick

Layout

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

Typografie

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

Formulare

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

Datenanzeige

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

Auf- und Zuklappen

Tabs

Accordion

Segmented Control

Overlays

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

Dynamisches Rendern

Cond

Match

Foreach

Auto Scroll

Medien

Image

Audio

Video

Tabellen und Datengrids

Table

Data Table

Data Editor

Diagramme

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

Diagrammbausteine

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

Andere Diagrammbibliotheken

Plotly

Pyplot

HTML-Elemente

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

Weitere Werkzeuge

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

Die Komponentenwerkstatt: Reflex' 100 Bibliotheksbausteine

Typografie

Markdown

rx.markdownrx.markdown.plugin

Offizielle Doku

Werkstattauftrag

Bitte neben das Feld für Produktbewertungen eine Vorschau, die sofort zeigt, wie das Markdown der Kundschaft aussehen wird.

rx.markdown nimmt eine Markdown-Zeichenkette und zeichnet daraus Überschriften, Listen, Links, Code und Tabellen. Es folgt GitHub Flavored Markdown (GFM) und kann auch Formeln und Syntaxhervorhebung. Du setzt es überall dort ein, wo der Inhalt als Text vorliegt: lange Hinweise, Hilfetexte, Beiträge von Nutzern. Das Kind muss genau eine Zeichenkette oder ein State-Wert sein.

Hello World!

Support us on Github.

Use reflex deploy to deploy your app with a single command.

rx.vstack(
    rx.markdown("## Hello World!"),
    rx.markdown("### Hello World!"),
    rx.markdown("#### Hello World!"),
    rx.markdown("Support us on [Github](https://github.com/reflex-dev/reflex)."),
    rx.markdown("Use `reflex deploy` to deploy your app with **a single command**."),
)

Props ausprobieren

Das Aussehen von rx.markdown bestimmt der Inhalt. Deshalb schaltest du an der Werkbank die vier standardmäßig aktiven Plugins ein und aus. Jeder Schalter verändert einen Teil des Satzes.

Props ausprobieren

~~Old~~ new price. Area: $x^2 + y^2$ . Raw HTML. Visit https://reflex.dev

use_gfm

use_math

use_katex

use_raw

rx.markdown("~~Old~~ **new** price. Area: $x^2 + y^2$. <mark>Raw HTML</mark>. Visit https://reflex.dev", use_gfm=True, use_math=True, use_katex=True, use_raw=True)

Ohne use_gfm verschwinden Durchstreichung und automatische Links, ohne use_math die Formeln, ohne use_raw die Auswertung von HTML-Tags. Schaltest du nur use_katex aus, wird die Formel nicht gezeichnet, sondern bleibt wie Code stehen.

Prop	Werte	Standard	Verwendung
Kind	eine Zeichenkette oder ein State-Wert	Pflicht	Markdown-Quelltext
`component_map`	`{"h1": Funktion, "p": Funktion, …}`	Standardzuordnung der Website	Reflex-Komponenten, die Markdown-Elemente zeichnen
`use_gfm`	`True` / `False`	`True`	GFM (Tabellen, Durchstreichung, automatische Links, Checklisten)
`use_math`	`True` / `False`	`True`	$…$ -Formelsyntax lesen (remark-math)
`use_katex`	`True` / `False`	`True`	Formeln mit KaTeX zeichnen (rehype-katex)
`use_raw`	`True` / `False`	`True`	HTML-Tags im Quelltext auswerten (rehype-raw)
`use_unwrap_images`	`True` / `False`	`True`	Das `<p>` um Bilder entfernen
`remark_plugins` · `rehype_plugins`	Liste von `rx.markdown.plugin(…)`	keiner	Plugins hinzufügen

rx.markdown in Reflex 0.10 legt immer ein äußeres <div> an, und Stil-Props wie padding landen auf diesem div. An Events gibt es nur die Standard-Events.

Formeln

Was in $ eingeschlossen ist, wird als LaTeX-Formel gezeichnet.

Pythagorean theorem: $a^2 + b^2 = c^2$ .

rx.markdown("Pythagorean theorem: $a^2 + b^2 = c^2$.")

Weil $ das Formelzeichen ist, wird alles zwischen zwei $ im Text zur Formel; Zeichen verschwinden dann oder sehen seltsam aus. Für ein echtes $, etwa bei Preisen, schreibst du \$. Kennst du den Inhalt nicht im Voraus, etwa bei Nutzertexten oder KI-Antworten, übergibst du content.replace("$", "\\$"). Unten ist die erste Zeile kaputt, die zweite erscheint wie gewünscht.

Coffee $4, cake$ 6.

Coffee $4, cake $6.

rx.vstack(
    rx.markdown("Coffee $4, cake $6."),
    rx.markdown(r"Coffee \$4, cake \$6."),
)

Codeblöcke und Tabellen

Schreibst du nach drei Backticks einen Sprachnamen, entsteht ein Codeblock mit Syntaxhervorhebung. Teilst du Spalten mit |, entsteht eine Tabelle (GFM). Bei mehrzeiligen Zeichenketten wird die gemeinsame Einrückung am Zeilenanfang automatisch entfernt.

import reflex as rx

app = rx.App()
app.add_page(index)

rx.markdown(
    """
```python
import reflex as rx

app = rx.App()
app.add_page(index)
```
"""
)

Syntax	Description
Header	Title
Paragraph	Text

rx.markdown(
    """
| Syntax    | Description |
| --------- | ----------- |
| Header    | Title       |
| Paragraph | Text        |
"""
)

Plugins hinzufügen

Über die Standard-Plugins hinaus kannst du mit remark_plugins und rehype_plugins remark-Plugins (Markdown-Stufe) und rehype-Plugins (HTML-Stufe) ergänzen. Du erzeugst sie mit rx.markdown.plugin(paket@version, exportierter Name); braucht ein Plugin Optionen, übergibst du ein Tupel (plugin, options-dict).

# Emoji-Kürzel :smile: → Emoji
rx.markdown(
    "Hello :smile:! :rocket:",
    remark_plugins=[rx.markdown.plugin("remark-emoji@5.0.2", "remarkEmoji")],
)

# Nicht vertrauenswürdiges HTML nach sicheren, GitHub-ähnlichen Regeln filtern
rx.markdown(
    'Some **bold** text and a <script>alert("XSS")</script>.',
    use_raw=True,
    rehype_plugins=[rx.markdown.plugin("rehype-sanitize@5.0.1", "rehypeSanitize")],
)

# Plugin mit Optionen: Überschriften bekommen eine id und werden ganz zum Link auf diese id
rx.markdown(
    "## Heading 2\n### Heading 3",
    rehype_plugins=[
        rx.markdown.plugin("rehype-slug@6.0.0", "rehypeSlug"),
        (
            rx.markdown.plugin("rehype-autolink-headings@7.1.0", "rehypeAutolinkHeadings"),
            {"behavior": "wrap", "properties": {"className": ["heading-link"]}},
        ),
    ],
)

Jedes Plugin installiert ein neues npm-Paket im Frontend der App, deshalb steht es auf dieser Seite nur als Code.

component_map: Komponente je Element festlegen

Die Schlüssel von component_map sind Namen von Markdown-Elementen (h1, p, code, pre, a …), die Werte Funktionen, die den Text entgegennehmen und eine Reflex-Komponente zurückgeben. pre (Codeblock) und a (Link) bekommen neben dem Text auch **props, die du einfach weiterreichst: Bei pre steckt darin der Sprachname, bei a die Adresse. Nicht angegebene Elemente behalten ihr Standardaussehen.

Hello World!

Here is some code:

component = rx.text("Hello World!")

And a link to Reflex.

markdown_custom_map = {
    "h1": lambda text: rx.heading(text, as_="h2", size="5", margin_y="0.5em"),
    "p": lambda text: rx.text(text, color_scheme="green", margin_y="0.5em"),
    "code": lambda text: rx.code(text, color_scheme="purple"),
    "pre": lambda text, **props: rx.code_block(text, **props, theme=rx.code_block.themes.dark, margin_y="1em"),
    "a": lambda text, **props: rx.link(text, **props, color_scheme="crimson", underline="always"),
}


rx.markdown(
    r"""
# Hello World!

Here is some `code`:

```python
component = rx.text("Hello World!")
```

And a link to [Reflex](https://reflex.dev/).
""",
    component_map=markdown_custom_map,
)

Auftrag erledigt

Liegt der Inhalt im State, zeichnet rx.markdown(State.wert) bei jeder Änderung neu. Was du links eintippst, ändert sofort die Vorschau rechts. Weil es Text von Nutzern ist, werden HTML-Tags mit use_raw=False nicht ausgewertet.

Thanks for the fast delivery!

Box was intact
Size fits

Rating: 5/5

class MarkdownPreviewState(rx.State):
    source: str = "**Thanks** for the *fast* delivery!\n\n- Box was intact\n- Size fits\n\nRating: `5/5`"

    @rx.event
    def set_source(self, value: str):
        self.source = value


rx.grid(
    rx.text_area(
        value=MarkdownPreviewState.source,
        on_change=MarkdownPreviewState.set_source,
        rows="9",
        width="100%",
    ),
    rx.box(
        rx.markdown(MarkdownPreviewState.source, use_raw=False),
        padding="0 14px",
        border=f"1px solid {rx.color('gray', 6)}",
        border_radius="8px",
        min_height="100%",
    ),
    columns={"initial": "1", "sm": "2"},
    spacing="3",
    width="100%",
)

Werkstattnotizen

rx.markdown(eine Zeichenkette oder ein State-Wert). GFM, Formeln und HTML sind standardmäßig aktiv.
Mit use_gfm, use_math, use_katex, use_raw und use_unwrap_images schaltest du Standard-Plugins aus.
Ein echtes $ im Text schreibst du als \$ (Preise, KI-Antworten).
Mit component_map tauschst du die Komponente je Element aus. pre und a bekommen **props.
Für Nutzertexte use_raw=False. Plugins ergänzt du mit remark_plugins und rehype_plugins.

← Zurück

Typografie · Code

Weiter →

Typografie · Blockquote

Über neue Lektionen informiert werden

Wir schicken dir eine E-Mail, wenn dieser Kurs neue Lektionen bekommt oder ein Folgekurs erscheint.

Fragen & Antworten

Frag alles zu dieser Lektion. Fragen aus allen Sprachversionen dieser Seite erscheinen hier gemeinsam.

ReflexKR

Python und Reflex zum Anfassen. Alle Beispiele wurden mit Reflex 0.10.0 ausgeführt und geprüft.

ReflexKR ist kostenlos und ohne Werbebanner. Wenn es dir geholfen hat, kannst du es mit einem Kaffee unterstützen. ☕ Spendier uns einen Kaffee

Hinweis zu Affiliate-Links

한국어 English 日本語简体中文 Español Deutsch

Built with Reflex