CodeBlock

Component

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

Required Props

code

(str)

The code text to display inside the code block.

Optional Props

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

code

(str)

The code text to display inside the code block.

Optional Props

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