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

データ表示

Code Block

rx.code_blockrx.code_block.themes

公式ドキュメント

工房の注文書

インストール案内のページに「インストールコマンド」と「最初のアプリのコード」を色付きのコードボックスで入れ、コピーボタンも付けてください。

rx.code_blockは複数行のコードを言語に合わせて色付けして表示します。改行とインデントをそのまま含んだ文字列を最初の引数に渡し、languageで言語を伝えます。1行の中の短いコードにはrx.codeを使います。この講座のすべての例のコードもrx.code_blockで表示しています。

1
2
3
4
5
def fib(n):
    if n <= 1:
        return n
    else:
        return fib(n - 1) + fib(n - 2)

rx.code_block(
    """def fib(n):
    if n <= 1:
        return n
    else:
        return fib(n - 1) + fib(n - 2)""",
    language="python",
    show_line_numbers=True,
)

プロパティを変えてみる

言語を変えると、同じ文でも色付けが変わります。下の欄に別のコードを1行書いてみても構いません。

プロパティを変えてみる

1
SELECT name FROM users WHERE id = 1;

code

language

show_line_numbers

rx.code_block("SELECT name FROM users WHERE id = 1;", language="sql", show_line_numbers=True)

languageは色付けのルールを決めます。show_line_numbersをオンにすると左側に行番号が付きます。

プロパティ	値	既定値	用途
最初の引数（`code`）	文字列	必須	表示するコード
`language`	`"python"` `"javascript"` `"sql"` `"bash"` …	`"python"`	色付けのルール
`theme`	`rx.code_block.themes.…`	ライト時は`one_light`、ダーク時は`one_dark`	配色
`show_line_numbers`	`True` / `False`	`False`	行番号
`starting_line_number`	整数	`1`	最初の行番号
`wrap_long_lines`	`True` / `False`	`False`	長い行を折り返して表示する
`can_copy`	`True` / `False`	`False`	右上のコピーボタン
`copy_button`	コンポーネント	なし	既定のコピーボタンの代わりに使うボタン
`custom_style`	dict	なし	コードボックスのスタイル
`code_tag_props`	dict	なし	内側の`code`タグに渡すプロパティ

テーマ

themeにはrx.code_block.themesの値を渡します。"dracula"のような文字列は受け付けません。指定しなければ、ライトモードではone_light、ダークモードではone_darkが自動的に使われます。

print("Hello, world!")

rx.code_block(
    'print("Hello, world!")',
    language="python",
    theme=rx.code_block.themes.dracula,
)

モードごとにテーマを自分で選ぶなら、rx.color_mode_condにライト時とダーク時の値を渡します。

print("Hello, world!")

rx.code_block(
    'print("Hello, world!")',
    language="python",
    theme=rx.color_mode_cond(
        light=rx.code_block.themes.one_light,
        dark=rx.code_block.themes.one_dark,
    ),
)

Stateの文字列でテーマを選びたい場合、文字列をそのまま渡すことはできないので、rx.matchでテーマの値に対応付けます。ほかにもnord、vs_dark、ghcolors、night_owl、material_darkなど40種類ほどあります。

for i in range(3):
    print(i)

class CodeBlockThemeState(rx.State):
    theme_name: str = "dracula"

    @rx.event
    def set_code_block_theme(self, value: str):
        self.theme_name = value


rx.vstack(
    rx.select(["dracula", "nord", "vs_dark", "ghcolors"], value=CodeBlockThemeState.theme_name, on_change=CodeBlockThemeState.set_code_block_theme),
    rx.code_block(
        "for i in range(3):\n    print(i)",
        language="python",
        theme=rx.match(
            CodeBlockThemeState.theme_name,
            ("dracula", rx.code_block.themes.dracula),
            ("nord", rx.code_block.themes.nord),
            ("vs_dark", rx.code_block.themes.vs_dark),
            rx.code_block.themes.ghcolors,
        ),
        width="100%",
    ),
    width="100%",
)

行番号と長い行

starting_line_numberは最初の行番号を決めます。長いファイルの一部だけを見せるときに、元の行番号に合わせられます。wrap_long_lines=Trueは横にはみ出す行を次の行に折り返します。

10
11
12
13
total = 0
for price in [1200, 800, 450]:
    total += price
print(f"Total: {total} won, and this comment is long enough to show how wrapping works")

rx.code_block(
    """total = 0
for price in [1200, 800, 450]:
    total += price
print(f"Total: {total} won, and this comment is long enough to show how wrapping works")""",
    language="python",
    show_line_numbers=True,
    starting_line_number=10,
    wrap_long_lines=True,
)

コピーボタンとスタイル

can_copy=Trueを渡すと右上にコピーボタンが付き、押すとコードがクリップボードに入ります。公式ドキュメントのプロパティ表にはありませんが、Reflex 0.10にあるプロパティです。ボタンの見た目を変えるなら、copy_buttonに自作のボタンを渡します。

pip install reflex

rx.code_block(
    "pip install reflex",
    language="bash",
    can_copy=True,
)

width、font_sizeのようなスタイルのプロパティとcustom_styleはコードボックスに適用されます。内側のcodeタグに個別に渡したいものはcode_tag_propsで渡します。

{"name": "reflex", "version": "0.10.0"}

rx.code_block(
    '{"name": "reflex", "version": "0.10.0"}',
    language="json",
    custom_style={"borderRadius": "12px", "fontSize": "15px"},
    code_tag_props={"style": {"fontFamily": "monospace"}},
)

注文書を仕上げる

インストールコマンドはbashで、最初のアプリのコードは行番号付きのpythonで見せ、どちらにもコピーボタンを付けます。

1. Install

pip install reflex

2. Create an app

1
2
3
4
5
6
7
8
9
import reflex as rx


def index():
    return rx.text("Hello!")


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

rx.vstack(
    rx.text("1. Install", weight="bold"),
    rx.code_block("pip install reflex", language="bash", can_copy=True, width="100%"),
    rx.text("2. Create an app", weight="bold"),
    rx.code_block(
        """import reflex as rx


def index():
    return rx.text("Hello!")


app = rx.App()
app.add_page(index)""",
        language="python",
        show_line_numbers=True,
        can_copy=True,
        width="100%",
    ),
    width="100%",
)

工房ノート

rx.code_block("コード", language="python")で色付きのコードボックスを作る。
themeはrx.code_block.themes.名前。文字列は不可で、Stateで選ぶならrx.match。
show_line_numbers · starting_line_number · wrap_long_linesで行を扱う。
can_copy=Trueでコピーボタン（0.10、ドキュメントの表にはない）、copy_buttonでボタンを差し替える。

← 前へ

データ表示 · Data List

データ表示 · Progress

新しい授業・講座のお知らせを受け取る

この講座に授業が追加されたり、続きの講座が公開されたりしたらメールでお知らせします。

質問と回答

この回について気になることを書き込んでください。すべての言語のページの質問がここに集まります。

ReflexKR

触って学ぶPythonとReflex。すべての例はReflex 0.10.0で実際に動かして確認しています。

ReflexKRはバナー広告なし・無料で運営しています。役に立ったら、コーヒー一杯で応援してください。 ☕ コーヒーで応援する

アフィリエイトと支援について

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

Built with Reflex