Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 25 additions & 0 deletions docs/library/data-display/code_block.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,3 +23,28 @@ rx.code_block(
show_line_numbers=True,
)
```

## Themes

The `theme` prop must be set to a `Theme` value accessed from the `rx.code_block.themes` namespace; strings are not accepted. By default, the code block uses `one_light` in light mode and `one_dark` in dark mode.

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

To pick a theme that responds to the global color mode, pass `rx.color_mode_cond` with the desired light and dark variants:

```python demo
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,
),
)
```
Original file line number Diff line number Diff line change
Expand Up @@ -387,8 +387,9 @@ class CodeBlock(Component, MarkdownComponentMap):

alias = "SyntaxHighlighter"

theme: Var[Theme | str] = field(
default=Theme.one_light, doc='The theme to use ("light" or "dark").'
theme: Var[Theme] = field(
default=Theme.one_light,
doc="The theme to use, accessed via rx.code_block.themes (e.g. rx.code_block.themes.one_dark).",
)
Comment thread
FarhanAliRaza marked this conversation as resolved.

language: Var[LiteralCodeLanguage] = field(
Expand Down
2 changes: 1 addition & 1 deletion pyi_hashes.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"packages/reflex-components-code/src/reflex_components_code/code.pyi": "a879ccd253e901964a7ab7ea7154f904",
"packages/reflex-components-code/src/reflex_components_code/code.pyi": "6ef91a4a4976e66b2761539e16d4f28e",
"packages/reflex-components-code/src/reflex_components_code/shiki_code_block.pyi": "d3e0c33fdc34f5c154ac387d550c0d29",
"packages/reflex-components-core/src/reflex_components_core/__init__.pyi": "82b29d23f2490161d42fd21021bd39c3",
"packages/reflex-components-core/src/reflex_components_core/base/__init__.pyi": "7009187aaaf191814d031e5462c48318",
Expand Down
26 changes: 26 additions & 0 deletions tests/units/components/datadisplay/test_code.py
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import pytest
from reflex_components_code.code import CodeBlock, Theme

import reflex as rx


@pytest.mark.parametrize(
("theme", "expected"),
Expand All @@ -10,3 +12,27 @@ def test_code_light_dark_theme(theme, expected):
code_block = CodeBlock.create(theme=theme)

assert code_block.theme._js_expr == expected # pyright: ignore [reportAttributeAccessIssue]


def test_code_block_rejects_string_theme():
with pytest.raises(TypeError, match=r"CodeBlock\.theme"):
CodeBlock.create("print('Hello')", theme="one_dark") # pyright: ignore[reportArgumentType]


def test_code_block_accepts_color_mode_cond_theme():
theme = rx.color_mode_cond(
light=rx.code_block.themes.one_light,
dark=rx.code_block.themes.one_dark,
)
code_block = CodeBlock.create("print('Hello')", theme=theme)

rendered = code_block.render()
style_prop = next((p for p in rendered["props"] if p.startswith("style:")), None)
assert style_prop is not None, "code block did not render a style prop"
assert "resolvedColorMode" in style_prop
assert "oneLight" in style_prop
assert "oneDark" in style_prop

imports = code_block._get_all_imports()
assert "react-syntax-highlighter/dist/esm/styles/prism/one-light" in imports
assert "react-syntax-highlighter/dist/esm/styles/prism/one-dark" in imports
Loading