114 lines
2.6 KiB
Markdown
114 lines
2.6 KiB
Markdown
---
|
|
components:
|
|
- rx.markdown
|
|
---
|
|
|
|
```python exec
|
|
import reflex as rx
|
|
```
|
|
|
|
# Markdown
|
|
|
|
The `rx.markdown` component can be used to render markdown text.
|
|
It is based on [Github Flavored Markdown](https://github.github.com/gfm/).
|
|
|
|
```python demo
|
|
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 `$`:
|
|
|
|
```python demo
|
|
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 demo
|
|
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:
|
|
|
|
```python demo
|
|
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.
|
|
|
|
```md alert
|
|
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.
|
|
```
|
|
|
|
```python demo exec
|
|
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,
|
|
)
|
|
)
|
|
```
|