@htmlbricks/hb-area-code
v0.70.0
Published
Displays arbitrary text inside a `<code>` block with a themed background. A small copy button copies the content to the clipboard, briefly shows confirmation, and dispatches a `clipboardCopyText` custom event with the copied string.
Readme
hb-area-code — area-code
Category: utilities | Tags: utilities, developer
What it does
Displays arbitrary text inside a <code> block with a themed background. A copy button copies the content to the clipboard, shows brief confirmation, and dispatches a clipboardCopyText custom event with the copied string.
Custom element
hb-area-code
Attributes / props (snake_case)
| Property | Type | Notes |
| --- | --- | --- |
| id | string (optional) | Element identifier. |
| style | string (optional) | Inline style string. |
| content | string (required) | Text shown inside the code block. |
Style / theming: CSS custom property --hb-area-code-background (color). CSS part: content (the code element). No HTML slots.
Events (CustomEvent names)
clipboardCopyText—{ text: string }— Fired after a successful clipboard copy with the copied text.
Usage notes
- Uses Bootstrap-aligned theming patterns; primary styling is the component SCSS and
--hb-area-code-background. - Icons: not central to this component (copy UI is internal).
- Shadow DOM:
::part(content)can target the code element. - No i18n entries in
docs.ts.
Minimal HTML example
<hb-area-code content="npm install @htmlbricks/hb-area-code"></hb-area-code>