Code block · Caderno UI

Selective component imports

API reference: `<cad-code-block>`

code

string

copyable

boolean

false

copy-label

copyLabel

string

'Copy'

copied-label

copiedLabel

string

'Copied'

copy-error-label

copyErrorLabel

string

'Copy failed'

filename

string

language

string

show-line-numbers

showLineNumbers

boolean

false

tone

CadCodeBlockTone

'accent'

code

string

code

copyable

boolean

copyable

yes

copyLabel

string

copy-label

copiedLabel

string

copied-label

copyErrorLabel

string

copy-error-label

filename

string

filename

language

string

language

showLineNumbers

boolean

show-line-numbers

yes

tone

CadCodeBlockTone

tone

yes

cad-code-copy

CustomEvent

Reports whether the source was copied to the clipboard.

(default)

Progressive code content used when `code` is not set.

actions

Optional actions such as an application-owned copy button.

copy

Optional compact copy button.

base

Native figure.

code

Native code element.

header

Filename and language metadata.

pre

Native preformatted block.

--cad-code-bg

Code surface color.

--cad-code-ink

Code foreground color.

--cad-code-comment

Syntax comment color.

--cad-code-keyword

Syntax keyword color.

--cad-code-string

Syntax string color.

--cad-code-number

Syntax number color.

--cad-code-tag

Syntax tag color.

--cad-code-attribute

Syntax attribute color.

--cad-code-property

Syntax property color.

--cad-code-punctuation

Syntax punctuation color.

Copying

Add copyable for the built-in copy button. cad-code-copy reports success or failure. Use the actions slot for custom controls.

Syntax colors

HTML, Astro, JavaScript, TypeScript, CSS, JSON, and shell have built-in syntax colors. Other languages display as plain text. For a different highlighter, place pre-highlighted markup in the default slot.

API reference: <cad-code-block>

Copying

Syntax colors

API reference: `<cad-code-block>`