Code

Available as: Web ComponentShortcodeOxygen Element

Highlight a block of code similar to a code editor.

<spx-code type="css"> @media (min-width: 1280px) { body { margin: 18px; padding: 24px; } } </spx-code>
@media (min-width: 1280px) { body { margin: 18px; padding: 24px; } }

Properties

background

Type: stringDefault: 'var(--spx-color-gray-900)'CSS variable: --spx-code-background

Component background property.

border-radius

Type: stringDefault: 'var(--spx-border-radius)'CSS variable: --spx-code-border-radius

Component border-radius property.

clipboard

Type: booleanDefault: true

Enable clipboard button.

clipboard-button-background

Type: stringDefault: 'var(--spx-color-gray-800)'CSS variable: --spx-code-clipboard-button-background

Clipboard button background.

clipboard-button-color

Type: stringDefault: 'var(--spx-color-gray-400)'CSS variable: --spx-code-clipboard-button-color

Clipboard button color.

clipboard-button-font-size

Type: stringDefault: '12px'CSS variable: --spx-code-clipboard-button-font-size

Clipboard button font-size.

clipboard-button-font-weight

Type: anyDefault: 600CSS variable: --spx-code-clipboard-button-font-weight

Clipboard button font-weight.

clipboard-button-padding

Type: stringDefault: '6px 12px'CSS variable: --spx-code-clipboard-button-padding

Clipboard button padding.

clipboard-button-text

Type: stringDefault: 'Copy'

clipboard-button-text-copied

Type: stringDefault: 'Copied!'

clipboard-button-text-transform

Type: stringDefault: 'uppercase'CSS variable: --spx-code-clipboard-button-text-transform

Clipboard button text-transform.

display

Type: stringDefault: 'block'CSS variable: --spx-code-display

Component display property.

font-size

Type: stringDefault: 'clamp(12px, 1.6vw, 16px)'CSS variable: --spx-code-font-size

Component font-size property.

height

Type: stringDefault: 'auto'

lazy

Type: boolean

Load component when it enters the viewport.

line-numbers

Type: booleanDefault: true

Enable line numbers.

line-numbers-background

Type: stringDefault: 'var(--spx-color-gray-800)'CSS variable: --spx-code-line-numbers-background

Line numbers background.

line-numbers-color

Type: stringDefault: 'var(--spx-color-gray-400)'CSS variable: --spx-code-line-numbers-color

Line numbers color.

line-numbers-start

Type: number

Start of line number.

max-width

Type: stringDefault: '100%'CSS variable: --spx-code-max-width

Component max-width property.

overflow

Type: stringDefault: 'auto'

padding

Type: stringDefault: 'clamp(20px, 2.4vw, 40px)'CSS variable: --spx-code-padding

Component padding property.

scrollbar

Type: booleanDefault: true

Hide scrollbar.

theme

Type: stringDefault: 'default'Choices: 'default', 'dracula'

Colour theme.

type

Type: stringDefault: 'markup'Choices: 'markup', 'css', 'php'

Determines the programming language.

Events

spxCodeDidLoad

Fires after component has loaded.

Methods

reload

Reload component.