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**."
),
)
Math Equations
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$.")
Syntax Highlighting
You can render code blocks with syntax highlighting using the ```{language} syntax:
```python 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)
\```
"""
)
Tables
You can render tables using the |
syntax:
Syntax | Description |
---|---|
Header | Title |
Paragraph | Text |
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.
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.
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=rx.code_block.themes.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,
)
)