Code
Available as: Web ComponentShortcodeOxygen ElementHighlight 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.
