quirl.components.code

A theme-colored, horizontally-scrollable code block.

Module Contents

Classes

CodeBlock

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

EditableCodeBlock

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

Functions

get_default_style

Returns the codeblock default style.’

API

class quirl.components.code.CodeBlock(element: Optional[str] = None, properties: Optional[Dict[str, str]] = None, props: Optional[Dict[str, str]] = None, style: Optional[Dict[str, str]] = None, inner_html: Optional[Union[str, str, float]] = None, children: Optional[List[duck.html.components.HtmlComponent]] = None, **kwargs)[source]

Bases: duck.html.components.code.CodeBlock

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:

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

Initialization

Initialize an HTML component.

Parameters:
  • element – The HTML element tag name (e.g., textarea, input, button). Can be None, but make sure element is returned by get_element method.

  • accept_inner_html – Whether the HTML component accepts an inner body (e.g., inner-body-here).

  • inner_html – Inner html to add to the HTML component. Defaults to None.

  • properties – Dictionary for properties to initialize the component with.

  • props – Just same as properties argument (added for simplicity).

  • style – Dictionary for style to initialize the component with.

  • event_handlers – Events to automatically bind. Each dictionary maps an event name to its handler and may include additional keyword arguments forwarded to bind(), e.g. event_handlers=[{"click": on_button_click, **extra_kwargs}].

  • **kwargs – Extra keyword arguments

Raises:

HtmlComponentError – If ‘element’ is not a string or ‘inner_html’ is set but ‘accept_inner_html’ is False.

docs_preview_kwargs

None

on_create()[source]

Build the code block with theme-aware, escaped content.

class quirl.components.code.EditableCodeBlock(element: Optional[str] = None, properties: Optional[Dict[str, str]] = None, props: Optional[Dict[str, str]] = None, style: Optional[Dict[str, str]] = None, inner_html: Optional[Union[str, str, float]] = None, children: Optional[List[duck.html.components.HtmlComponent]] = None, **kwargs)[source]

Bases: duck.html.components.code.EditableCodeBlock

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:

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

Initialization

Initialize an HTML component.

Parameters:
  • element – The HTML element tag name (e.g., textarea, input, button). Can be None, but make sure element is returned by get_element method.

  • accept_inner_html – Whether the HTML component accepts an inner body (e.g., inner-body-here).

  • inner_html – Inner html to add to the HTML component. Defaults to None.

  • properties – Dictionary for properties to initialize the component with.

  • props – Just same as properties argument (added for simplicity).

  • style – Dictionary for style to initialize the component with.

  • event_handlers – Events to automatically bind. Each dictionary maps an event name to its handler and may include additional keyword arguments forwarded to bind(), e.g. event_handlers=[{"click": on_button_click, **extra_kwargs}].

  • **kwargs – Extra keyword arguments

Raises:

HtmlComponentError – If ‘element’ is not a string or ‘inner_html’ is set but ‘accept_inner_html’ is False.

docs_preview_kwargs

None

on_create()[source]

Build the code block with theme-aware, escaped content.

quirl.components.code.get_default_style() dict[source]

Returns the codeblock default style.’