Components Data and consoles

Code Block

Material Design 3-styled code block web component (lit-material-code-block) — a monospace code container with a copy button and optional truncation.

  • 4.2 KB gzipped
  • @lit-material/code-block 0.2.0
  • Renders on the server

Example

Install

npm install @lit-material/code-block @lit-material/tokens
import "@lit-material/code-block";

Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide

API

<lit-material-code-block>

A monospace container for a block of source code — a filename/language label, a copy-to-clipboard button, and optional truncation for long snippets. Deliberately doesn't syntax-highlight: that's a real, separate feature (tokenizing a specific language, shipping a grammar/theme) that belongs to a dedicated highlighting library, not this component — slot in pre-highlighted markup yourself if you need it, the same way a <pre> element itself doesn't care what's inside it.

Properties

PropertyAttributeTypeDefaultDescription
labellabelstring""A filename or language label shown in the header (e.g. "index.ts").
copyablecopyablebooleantrue
expandableexpandablebooleanfalse
expandedexpandedbooleanfalseWhether an expandable block shows its full content. Ignored otherwise.

Events

EventDescription
copyFires after copy() writes the code's text to the clipboard (not when copying fails).

Slots

SlotDescription
defaultThe code content (plain text, or pre-highlighted markup from your own highlighter).

CSS parts

PartDescription
code-blockThe outer container.
headerThe label/copy-button row. Only rendered when label or copyable.
labelThe label text.
copyThe copy button.
preThe <pre> element.
codeThe <code> element.
expand-toggleThe "Show more"/"Show less" button. Only rendered when expandable.

CSS custom properties

PropertyDescription
--lit-material-code-block-shapeCorner radius (default --md-sys-shape-corner-small).
--lit-material-code-block-container-colorBackground (default --md-sys-color-surface-container-high).
--lit-material-code-block-fontThe code's font family (default --md-sys-typescale-code-font, then monospace).
--lit-material-code-block-font-sizeThe code's font size (default 0.875rem).
--lit-material-code-block-line-heightThe code's line height (default 1.5).
--lit-material-code-block-label-fontThe label's font family, e.g. a monospace file name (default: the header's).

<lit-material-code-field>

A plain-text editor for code and config — YAML, JSON, a script, a Dockerfile: monospace, no wrapping or spell-check, with line numbers.

Properties

PropertyAttributeTypeDefaultDescription
valuevaluestring""The text.
labellabelstring""Visible label above the field.
languagelanguagestring"""json" validates as JSON; anything else is only a hint.
validatorproperty onlyCodeValidator | undefinednoneCustom check; wins over language.
indentSizeindent-sizenumber2Spaces per indent level.
disableddisabledbooleanfalse
readonlyreadonlybooleanfalse
invalidinvalidbooleanfalseSet while the text fails validation; reflected for styling.
validationMessageproperty onlystring""The current validation message, "" when valid.

Events

EventDescription
changeWhen an edit is committed (blur).
inputOn every edit (from the inner textarea).

CSS parts

PartDescription
fieldThe bordered box.
gutterThe line numbers.
textareaThe textarea.
errorThe error text.

CSS custom properties

PropertyDescription
--lit-material-code-field-fontFont family (default --md-sys-typescale-code-font, then monospace).
--lit-material-code-field-font-sizeFont size (default 0.875rem).
--lit-material-code-field-min-heightSmallest height (default 8lh).
--lit-material-code-field-max-heightHeight before it scrolls (default 24lh).

Source on GitHub npm