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