Markdown

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

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

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

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

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

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

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,
)

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%",
)