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: .
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:
| Syntax | Description |
|---|---|
| Header | Title |
| Paragraph | Text |
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,
)
)Did you find this useful?
