Reflex Logo

Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding
Hosting

Library

/

Typography

/

Markdown

The rx.markdown component can be used to render markdown text. It is based on Github Flavored Markdown.

Hello World!

Hello World!

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**."
    ),
)

You can render math equations using LaTeX. For inline equations, surround the equation with $:

Pythagorean theorem: a2+b2=c2a^2 + b^2 = c^2.

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

You can render code blocks with syntax highlighting using the ```{language} syntax:

import reflex as rx
from .pages import index

app = rx.App()
app.add_page(index)
rx.markdown(
    r"""
```python
import reflex as rx
from .pages import index

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

You can render tables using the | syntax:

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

You can specify which components to use for rendering markdown elements using the component_map prop.

Each key in the component_map prop is a markdown element, and the value is a function that takes the text of the element as input and returns a Reflex component.

Hello World!

This is a Subheader

And Another Subheader

Here is some code:

import reflex as rx

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

And then some more text here, followed by a link to Reflex.

component_map = {
    "h1": lambda text: rx.heading(
        text, size="5", margin_y="1em"
    ),
    "h2": lambda text: rx.heading(
        text, size="3", margin_y="1em"
    ),
    "h3": lambda text: rx.heading(
        text, size="1", margin_y="1em"
    ),
    "p": lambda text: rx.text(
        text, color="green", margin_y="1em"
    ),
    "code": lambda text: rx.code(text, color="purple"),
    "codeblock": lambda text, **props: rx.code_block(
        text, **props, theme="dark", margin_y="1em"
    ),
    "a": lambda text, **props: rx.link(
        text, **props, color="blue", _hover={"color": "red"}
    ),
}


def index():
    return rx.box(
        rx.markdown(
            r"""
# Hello World!

## This is a Subheader

### And Another Subheader

Here is some `code`:

```python
import reflex as rx

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

And then some more text here, followed by a link to [Reflex](https://reflex.dev).
""",
            component_map=component_map,
        )
    )

A markdown component.

PropTypeDescriptionValues
component_mapDict

The component map from a tag to a lambda that creates a component.

component_map_hashstr

The hash of the component map, generated at create() time.

Event Triggers

See the full list of default event triggers
← LinkQuote →

Did you find this useful?

HomeGalleryChangelogIntroductionHosting