ReflexKR

コンポーネント工房：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

公式ドキュメント

工房の注文書

商品レビューの入力欄の横に、お客さまが書いたマークダウンがどう表示されるかをすぐに見せるプレビューを付けてください。

rx.markdown はマークダウン文字列を受け取り、見出し、リスト、リンク、コード、表として描画します。GitHub 方式のマークダウン（GFM）に従い、数式やシンタックスハイライトにも対応します。長い案内文、ヘルプ、ユーザーが書いた文章のように、内容が文章で決まる場所に使います。子は文字列または State の値1つでなければなりません。

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 の見た目は内容が決めるので、実習台では既定でオンになっている4つのプラグインをオン・オフしてみます。各スイッチが1つの文の一部を変えます。

プロパティを変えてみる

~~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 の値1つ	必須	マークダウンの原文
`component_map`	`{"h1": 関数, "p": 関数, …}`	サイトの既定マップ	マークダウン要素を描画する 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> を1つ置き、padding などのスタイルプロパティはその div に付きます。イベントは基本イベントだけです。

数式

$ で囲んだ部分は LaTeX の数式として描画されます。

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

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

$ は数式の記号なので、文中に $ が2回出てくると、その間が数式に変わって文字が消えたりおかしく見えたりします。価格のように本物の $ を表示するには \$ に置き換えます。ユーザーの文章や AI の回答のように内容を事前に知らないときは、content.replace("$", "\\$") を通して渡します。下の1行目は崩れ、2行目はそのまま表示されます。

Coffee $4, cake$ 6.

Coffee $4, cake $6.

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

コードブロックと表

バッククォート3つのあとに言語名を書くと、シンタックスハイライト付きのコードブロックになります。| で列を区切ると表になります（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（マークダウン段階）・rehype（HTML 段階）のプラグインを remark_plugins と rehype_plugins で追加できます。rx.markdown.plugin(パッケージ@バージョン, エクスポート名) で作り、オプションが必要なら (プラグイン, オプションの dict) のタプルで渡します。

# 絵文字ショートコード :smile: → 絵文字
rx.markdown(
    "Hello :smile:! :rocket:",
    remark_plugins=[rx.markdown.plugin("remark-emoji@5.0.2", "remarkEmoji")],
)

# 信頼できない HTML を GitHub に似た安全なルールでフィルタリングする
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 のキーはマークダウン要素の名前（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 の値1つ)。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