ReflexKR

Reflex 官方文档

组件工坊：Reflex 组件库 100 例

课程概览

布局

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

排版

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

表单

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

数据展示

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

展开与切换

Tabs

Accordion

Segmented Control

浮层

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

动态渲染

Cond

Match

Foreach

Auto Scroll

媒体

Image

Audio

Video

表格与数据网格

Table

Data Table

Data Editor

图表

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

图表部件

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

其他图表库

Plotly

Pyplot

HTML 元素

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

其他工具

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

组件工坊：Reflex 组件库 100 例

排版

Markdown

rx.markdownrx.markdown.plugin

官方文档

工坊订单

请在商品评价输入框旁边加一个预览，实时显示顾客写的 Markdown 会是什么样子。

rx.markdown 接收 Markdown 字符串，把它渲染成标题、列表、链接、代码和表格。它遵循 GitHub 风格的 Markdown（GFM），也支持数学公式和语法高亮。适合长篇说明、帮助文档、用户撰写的内容等以文字为主的地方。子元素必须是一个字符串或 State 值。

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

试着改属性

rx.markdown 的外观由内容决定，所以在实验台上我们开关默认开启的四个插件。每个开关会改变一句话中的某一部分。

试着改属性

~~Old~~ new price. Area: $x^2 + y^2$ . Raw HTML. Visit https://reflex.dev

use_gfm

use_math

use_katex

use_raw

rx.markdown("~~Old~~ **new** price. Area: $x^2 + y^2$. <mark>Raw HTML</mark>. Visit https://reflex.dev", use_gfm=True, use_math=True, use_katex=True, use_raw=True)

关掉 use_gfm，删除线和网址自动链接就会消失；关掉 use_math，公式消失；关掉 use_raw，HTML 标签不再被解析。只关掉 use_katex 时，公式不会被渲染，而是像代码一样保留原样。

属性	取值	默认值	用途
子元素	一个字符串或 State 值	必填	Markdown 原文
`component_map`	`{"h1": 函数, "p": 函数, …}`	站点默认映射	用来渲染各 Markdown 元素的 Reflex 组件
`use_gfm`	`True` / `False`	`True`	GFM（表格、删除线、网址自动链接、任务列表）
`use_math`	`True` / `False`	`True`	解析 $…$ 公式语法（remark-math）
`use_katex`	`True` / `False`	`True`	用 KaTeX 渲染公式（rehype-katex）
`use_raw`	`True` / `False`	`True`	解析原文中的 HTML 标签（rehype-raw）
`use_unwrap_images`	`True` / `False`	`True`	去掉包裹图片的 `<p>`
`remark_plugins` · `rehype_plugins`	`rx.markdown.plugin(…)` 列表	无	添加插件

Reflex 0.10 的 rx.markdown 外层总会有一个 <div>，padding 之类的样式属性都加在这个 div 上。事件只有基础事件。

数学公式

用 $ 包起来的部分会渲染成 LaTeX 公式。

Pythagorean theorem: $a^2 + b^2 = c^2$ .

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

$ 是公式符号，所以正文里出现两个 $ 时，中间的内容会被当成公式，文字可能消失或显示异常。要显示价格这类真正的 $，就改写成 \$。像用户发帖、AI 回答这样事先不知道内容的情况，用 content.replace("$", "\\$") 处理后再传入。下面第一行显示错乱，第二行则原样显示。

Coffee $4, cake$ 6.

Coffee $4, cake $6.

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

代码块与表格

三个反引号后面写上语言名，就成了带语法高亮的代码块。用 | 分隔单元格就是表格（GFM）。多行字符串前面共同的缩进会被自动去掉。

import reflex as rx

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

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

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

Syntax	Description
Header	Title
Paragraph	Text

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

添加插件

除了默认插件，还可以通过 remark_plugins 和 rehype_plugins 添加 remark（Markdown 阶段）和 rehype（HTML 阶段）插件。用 rx.markdown.plugin(包名@版本, 导出名) 创建；需要选项时，以 (插件, 选项 dict) 元组的形式传入。

# 表情短代码 :smile: → emoji 字符
rx.markdown(
    "Hello :smile:! :rocket:",
    remark_plugins=[rx.markdown.plugin("remark-emoji@5.0.2", "remarkEmoji")],
)

# 用类似 GitHub 的安全规则过滤不可信的 HTML
rx.markdown(
    'Some **bold** text and a <script>alert("XSS")</script>.',
    use_raw=True,
    rehype_plugins=[rx.markdown.plugin("rehype-sanitize@5.0.1", "rehypeSanitize")],
)

# 带选项的插件：给标题加 id，并把整个标题变成指向该 id 的链接
rx.markdown(
    "## Heading 2\n### Heading 3",
    rehype_plugins=[
        rx.markdown.plugin("rehype-slug@6.0.0", "rehypeSlug"),
        (
            rx.markdown.plugin("rehype-autolink-headings@7.1.0", "rehypeAutolinkHeadings"),
            {"behavior": "wrap", "properties": {"className": ["heading-link"]}},
        ),
    ],
)

每个插件都会在应用前端新装一个 npm 包，所以本页只展示代码。

component_map：为每种元素指定渲染组件

component_map 的键是 Markdown 元素名（h1、p、code、pre、a …），值是接收文字并返回 Reflex 组件的函数。pre（代码块）和 a（链接）除了文字还会收到 **props，要原样传下去：pre 里带着语言名，a 里带着地址。没有指定的元素使用默认样式。

Hello World!

Here is some code:

component = rx.text("Hello World!")

And a link to Reflex.

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

完成订单

把内容放进 State，rx.markdown(State.值) 会在值每次变化时重新渲染。在左边输入，右边的预览立刻更新。因为是用户写的内容，用 use_raw=False 不解析 HTML 标签。

Thanks for the fast delivery!

Box was intact
Size fits

Rating: 5/5

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

工坊笔记

rx.markdown(一个字符串或 State 值)。GFM、公式、HTML 默认开启。
用 use_gfm、use_math、use_katex、use_raw、use_unwrap_images 关掉默认插件。
正文里真正的 $ 要改写成 \$（价格、AI 回答）。
用 component_map 替换各元素的渲染组件。pre 和 a 会收到 **props。
显示用户内容时用 use_raw=False。添加插件用 remark_plugins、rehype_plugins。

← 上一课

排版 · Code

下一课 →

排版 · Blockquote

订阅新课时和新课程通知

本课程新增课时或推出后续课程时，我们会发邮件通知你。

问答

关于本课有任何疑问都可以在这里留言。所有语言版本页面的提问会汇集在一起。

ReflexKR

动手学 Python 和 Reflex。所有示例均已在 Reflex 0.10.0 上实际运行验证。

ReflexKR 免费，没有横幅广告。如果对你有帮助，欢迎请我们喝杯咖啡。 ☕ 请我们喝杯咖啡

联盟链接与赞助说明

한국어 English 日本語简体中文 Español Deutsch

Built with Reflex