reflex_copy/docs/library/typography/markdown.md

---

components:

- rx.markdown

---

import reflex as rx

Markdown

The rx.markdown component can be used to render markdown text. It is based on Github Flavored 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**."),
)

Math Equations

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

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

Syntax Highlighting

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

rx.markdown(
r"""
\```python
import reflex as rx
from .pages import index

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

Tables

You can render tables using the | syntax:

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

Component Map

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.

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