Code

Available as: Web ComponentShortcodeOxygen Element

Highlight a block of code similar to a code editor.

<spx-code class="w-full" 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

border-radius

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

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-color

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

clipboard-button-font-size

Type: stringDefault: 12pxCSS Variable: --spx-code-clipboard-button-font-size

clipboard-button-font-weight

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

clipboard-button-padding

Type: stringDefault: 6px 12pxCSS Variable: --spx-code-clipboard-button-padding

clipboard-button-text

Type: stringDefault: Copy

clipboard-button-text-copied

Type: stringDefault: Copied!

clipboard-button-text-transform

Type: stringDefault: uppercaseCSS Variable: --spx-code-clipboard-button-text-transform

content

Type: string

Can be used instead of the inner slot.

filter

Type: stringCSS Variable: --spx-code-filter

font-size

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

hide-scrollbar

Type: booleanDefault: false

Show scrollbar.

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-color

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

line-numbers-start

Type: numberDefault: 1

Start of line number.

max-width

Type: stringDefault: 100%CSS Variable: --spx-code-max-width

padding

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

theme

Type: stringDefault: defaultChoices: default, dracula

Colour theme.

type

Type: stringDefault: markupChoices: markup, css, js, php, twig, json

Determines the programming language.

whitespace-left-trim

Type: booleanDefault: true

Removes all whitespace from the top of the code block.

whitespace-remove-indent

Type: booleanDefault: true

If the whole code block is indented too much it removes the extra indent.

whitespace-remove-trailing

Type: booleanDefault: true

Removes trailing whitespace on all lines.

whitespace-right-trim

Type: booleanDefault: true

Removes all whitespace from the bottom of the code block.

Slots

inner

Slot (between HTML tag).

Events

spxCodeDidLoad

Fires after component has loaded.