Code

CodeBlock

Component

A theme-colored, monospace code block with horizontal scroll.

Required Props

1

code

(str)

The code text to display inside the code block.

Optional Props

12

language

(str)

Label shown in the header, e.g. "python". Also applied to the inner `<code>` tag as a `language-{language}` class.

filename

(str)

Filename shown in the header, e.g. "main.py".

collapsible

(bool)

Renders a fixed-height preview with a bottom fade and a labeled toggle beneath the code when True.

collapsed_height

(str)

Preview height while collapsed, e.g. "320px". Defaults to a height that reads as a genuine preview rather than a sliver.

expand_label

(str)

Footer label shown while collapsed. Defaults to "Show more".

ollapse_label

(str)

Footer label shown while expanded. Defaults to "Show less".

code_props

(dict)

Extra props applied to the `<code>` tag.

code_style

(dict)

Extra styles applied to the `<code>` tag.

disable_copy_button

(bool)

Hides the copy button when True.

idle_icon

(str)

Raw svg shown on the copy button by default.

success_icon

(str)

Raw svg shown after a successful copy.

chevron_icon

(str)

Raw svg shown in the collapse footer.

Usage

python
CodeBlock(code="Button(text='Click me')")

Live Preview

Button(text='Click me')

EditableCodeBlock

Component

An editable theme-colored, monospace code block with horizontal scroll.

Required Props

1

code

(str)

The code text to display inside the code block.

Optional Props

12

language

(str)

Label shown in the header, e.g. "python". Also applied to the inner `<code>` tag as a `language-{language}` class.

filename

(str)

Filename shown in the header, e.g. "main.py".

collapsible

(bool)

Renders a fixed-height preview with a bottom fade and a labeled toggle beneath the code when True.

collapsed_height

(str)

Preview height while collapsed, e.g. "320px". Defaults to a height that reads as a genuine preview rather than a sliver.

expand_label

(str)

Footer label shown while collapsed. Defaults to "Show more".

ollapse_label

(str)

Footer label shown while expanded. Defaults to "Show less".

code_props

(dict)

Extra props applied to the `<code>` tag.

code_style

(dict)

Extra styles applied to the `<code>` tag.

disable_copy_button

(bool)

Hides the copy button when True.

idle_icon

(str)

Raw svg shown on the copy button by default.

success_icon

(str)

Raw svg shown after a successful copy.

chevron_icon

(str)

Raw svg shown in the collapse footer.

Usage

python
EditableCodeBlock(code="Button(text='Click me')")

Live Preview

Button(text='Click me')