duck.html.components.code

HTML Code 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, and copying code to the clipboard.

Classes:

  • CodeInner: Represents the inner <code> element within a <pre> tag.

  • Code: The base code block component, wrapped in a <pre> tag, with a copy button functionality.

  • EditableCode: Extends the Code component, allowing the code block to be editable.

Usage:

  • Code: Display static code with copy functionality.

  • EditableCode: Display editable code with copy functionality.

Example:

code_block = Code(code="print('Hello, world!')", code_props={"class": "highlighted"})
editable_code_block = EditableCode(code="x = 5", code_style={"color": "blue"})

Notes:

  • These implementations might require Bootstrap, JQuery and Bootstrap Icons.

Module Contents

Classes

Code

Code HTML component - The base component is built on the 

 tag.

CodeInner

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

EditableCode

Editable version of the Code component.

API

class duck.html.components.code.Code(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 HTML component - The base component is built on the 

 tag.

This component is used to display a block of code inside a <pre> tag, with a copy-to-clipboard button and customizable properties for the code block and its inner <code>’ tag.

Example Output:

<pre>
   <code>Code text here</code>
</pre>
Parameters:

  • code – The target code text that will be displayed inside the code block.

  • code_props – Dictionary of properties that will be applied to the tag (e.g., {"class": "highlighted"}).

  • code_style – Dictionary of styles that will be applied to the tag (e.g., {"color": "blue"}).

Methods:

  • add_initial_components: Adds initial components like styling, copy button, and script.

  • on_create: Sets the initial content and properties for the code block.

Variables:

  • code_copy_container – Container for the copy button.

  • code_copy_btn – The icon used as a button to trigger copying of the code.

  • code_inner – The inner code block inside the <pre> tag.

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.

  • **kwargs – Extra keyword arguments

Raises:

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

add_initial_components()[source]

Adds initial styling and components such as the copy button and the <code> element.

get_element()[source]
on_create()[source]

Initializes the components and sets up the code content. It checks if the code, code_props, and code_style arguments were passed in.

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

This component is a simple representation of the tag used inside the 

 tag for code display.

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.

  • **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()[source]
class duck.html.components.code.EditableCode(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.Code

Editable version of the Code component.

This component extends the base Code component and adds the ability to edit the code directly. The <pre> block and the <code> block are both made content-editable.

Example:

editable_code = EditableCode(code="print('Hello, world!')", code_style={"color": "green"})
Parameters:

  • code – The target code text.

  • code_style – Dictionary for styling the element (e.g., {"color": "red"}).

Methods:

  • on_create: Extends the Code.on_create method and adds the contenteditable attribute.

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.

  • **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()[source]

Extends the on_create method to add the contenteditable attribute to allow code editing.