Docs

Blog

Gallery

Resources

Learn

Components

API Reference

Onboarding

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.

The codeblock and a tags are special cases. In addition to the text, they also receive a props argument containing additional props for the 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.chakra.heading(
        text, size="lg", margin_y="1em"
    ),
    "h2": lambda text: rx.chakra.heading(
        text, size="md", margin_y="1em"
    ),
    "h3": lambda text: rx.chakra.heading(
        text, size="sm", 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.

custom_stylesDict

Custom styles for the markdown (deprecated in v0.2.9).

component_map_hashstr

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

Event Triggers

No component specific event triggers

← LinkQuote →

Did you find this useful?

HomeGalleryChangelogIntroductionHosting