`duck.html.components.code`¶

HTML Code Block Component Classes.

These classes represent a code block component that can be embedded within an HTML page. They provide functionality to display code with options for styling, interactivity, filenames, collapsing, and copying code to the clipboard.

Classes:

CodeContent: Represents the inner <code> element within a <pre> tag.
CodeBlock: The base code block component, wrapped in a <pre> tag, with a copy button, optional filename header, and optional collapsible body.
EditableCodeBlock: Extends CodeBlock, allowing the code block to be editable.

Usage:

CodeBlock: Display static code with copy functionality.
EditableCodeBlock: Display editable code with copy functionality.

Example:

code_block = CodeBlock(code="print('Hello, world!')", language="python")
editable_code_block = EditableCodeBlock(code="x = 5", code_style={"color": "blue"})
collapsible_block = CodeBlock(code="...", language="python", filename="main.py", collapsible=True)

Notes:

These components are self-contained — no jQuery, Bootstrap, or Bootstrap Icons are required. The copy button uses plain SVG icons and vanilla JS.
Collapsible blocks show a fixed-height preview with a bottom fade and a labeled toggle beneath the code, rather than a header icon — this keeps the affordance’s intent visible instead of hiding it behind a chevron.

Module Contents¶

Classes¶

`CodeBlock`	Code block HTML component — built on the `<pre>` tag.
`CodeContent`	Represents the inner `<code>` element in the HTML code block.
`EditableCodeBlock`	Editable version of the CodeBlock component.

Data¶

`COLLAPSE_SCRIPT`
`COPY_SCRIPT`
`DEFAULT_CHEVRON_ICON`
`DEFAULT_COPY_ICON`
`DEFAULT_COPY_SUCCESS_ICON`

API¶

duck.html.components.code.COLLAPSE_SCRIPT = <Multiline-String>¶

duck.html.components.code.COPY_SCRIPT = <Multiline-String>¶

class duck.html.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.InnerComponent

Code block HTML component — built on the <pre> tag.

Displays a block of code with a copy-to-clipboard button, an optional filename and/or language label, an optional collapsible body, and customizable properties for the inner <code> tag.

Example Output:

<pre>
    <div class="code-header">...</div>
    <div class="code-body">
        <code class="language-python">Code text here</code>
        <div class="code-fade"></div>
    </div>
    <div class="code-collapse-footer">Show more</div>
</pre>

Parameters:

code – The code text to display inside the code block.
language – Label shown in the header, e.g. “python”. Also applied to the inner <code> tag as a language-{language} class.
filename – Filename shown in the header, e.g. “main.py”.
collapsible – Renders a fixed-height preview with a bottom fade and a labeled toggle beneath the code when True.
collapsed_height – Preview height while collapsed, e.g. “320px”. Defaults to a height that reads as a genuine preview rather than a sliver.
expand_label – Footer label shown while collapsed. Defaults to “Show more”.
collapse_label – Footer label shown while expanded. Defaults to “Show less”.
code_props – Extra props applied to the <code> tag.
code_style – Extra styles applied to the <code> tag.
disable_copy_button – Hides the copy button when True.
idle_icon – Raw svg shown on the copy button by default.
success_icon – Raw svg shown after a successful copy.
chevron_icon – Raw svg shown in the collapse footer.

Variables:

code_content – The inner code element inside the <pre> tag.
copy_button – The clickable copy button, when enabled.

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.

build_children() → list[Any][source]¶

Builds the code block’s children in display order.

Returns:: List of components to attach to the <pre> element.

build_code_body() → duck.html.components.container.FlexContainer[source]¶

Wraps the code content in a container that manages the collapsed preview height and, when collapsible, a bottom fade overlay.

Returns:: A FlexContainer wrapping the code content.

build_code_content() → duck.html.components.code.CodeContent[source]¶

Builds the inner <code> element with the code text and overrides.

Returns:: A configured CodeContent component.

build_collapse_footer() → duck.html.components.container.FlexContainer[source]¶

Builds the toggle shown beneath the code body when collapsible is enabled — a text label stating intent (“Show more” / “Show less”) plus a chevron, rather than a bare icon in the header.

Returns:: A FlexContainer laying out the collapse footer row.

build_copy_button() → duck.html.components.container.FlexContainer[source]¶

Builds the clickable copy button with idle and success icon states.

Returns:: A FlexContainer acting as the copy button.

build_filename_label(filename: str) → Any[source]¶

Builds the filename label shown in the header.

Parameters:: filename – Filename to display, e.g. “main.py”.
Returns:: A Component rendering the filename label.

build_header() → duck.html.components.container.FlexContainer[source]¶

Builds the header row holding the filename, language label, and copy button.

Returns:: A FlexContainer laying out the header row.

build_language_label(language: str) → Any[source]¶

Builds the small language badge shown in the header.

Parameters:: language – Language name to display, e.g. “python”.
Returns:: A Component rendering the language label.

build_style() → duck.html.components.style.Style[source]¶

Builds the copy button, collapse footer, fade, and collapsed/expanded state css rules.

Returns:: A Style component containing the code block’s css rules.

get_element() → str[source]¶

has_header() → bool[source]¶

Checks whether the header row would have any content to show.

Returns:: True if a filename, language label, or copy button will be shown.

on_create() → None[source]¶

class duck.html.components.code.CodeContent(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.InnerComponent

Represents the inner <code> element in the HTML code block.

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.

get_element() → str[source]¶

duck.html.components.code.DEFAULT_CHEVRON_ICON¶: ‘

duck.html.components.code.DEFAULT_COPY_ICON¶: ‘<svg viewBox=“0 0 24 24” width=“16” height=“16” fill=“none” stroke=“currentColor” stroke-width=“1.8”…’

duck.html.components.code.DEFAULT_COPY_SUCCESS_ICON¶: ‘

class duck.html.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.CodeBlock

Editable version of the CodeBlock component.

Extends CodeBlock and makes the inner <code> block content-editable, so the displayed code can be edited directly in the browser.

Example:

editable_code_block = EditableCodeBlock(code="print('Hello, world!')", code_style={"color": "green"})

Parameters:

code – The target code text.
code_style – Styles applied to the <code> element.

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.

on_create() → None[source]¶

duck.html.components.code¶

Module Contents¶

Classes¶

Data¶

API¶

`duck.html.components.code`¶