Style Overrides
You can add a styleOverrides object to the engine configuration to customize the appearance of the rendered code blocks without having to write custom CSS.
The root level of this object contains core style settings like colors, fonts, paddings and more. Plugins can contribute their plugin style settings by adding a nested object with the plugin’s name as key. For example, if the frames plugin is enabled, you can override its shadowColor by setting styleOverrides.frames.shadowColor to a color value.
If any of the settings are not given, default values will be used or derived from the theme.
Core style settings
borderColor
({ theme }) => theme.colors['titleBar.border'] || lighten(theme.colors['editor.background'], theme.type === 'dark' ? 0.5 : -0.15) || 'transparent' Border color of code blocks.
borderRadius
Border radius of code blocks.
borderWidth
Border width of code blocks.
codeBackground
Background color of code blocks.
codeFontFamily
"ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace" Font family of code content.
codeFontSize
Font size of code content.
codeFontWeight
Font weight of code content.
codeForeground
Foreground color of code, unless overwritten by syntax highlighting.
codeLineHeight
Font line height of code content.
codePaddingBlock
Block-level padding (= top and bottom padding in horizontal writing mode) around the code content inside code blocks.
codePaddingInline
Inline-level padding (= left and right padding in horizontal writing mode) around the code content inside code blocks.
codeSelectionBackground
Background color of selected code, unless selection color customization is disabled by the option useThemedSelectionColors.
focusBorder
Color of the focus border around focused elements.
scrollbarThumbColor
Color of the scrollbar thumb, unless scrollbar color customization is disabled by the option useThemedScrollbars.
scrollbarThumbHoverColor
Color of the scrollbar thumb when hovered, unless scrollbar color customization is disabled by the option useThemedScrollbars.
uiFontFamily
"ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'" Font family of UI elements.
uiFontSize
Font size of UI elements.
uiFontWeight
Font weight of UI elements.
uiLineHeight
Font line height of UI elements.
uiPaddingBlock
Block-level padding (= top and bottom padding in horizontal writing mode) of UI elements like tabs, buttons etc.
uiPaddingInline
Inline-level padding (= left and right padding in horizontal writing mode) of UI elements like tabs, buttons etc.
uiSelectionBackground
Background color of selected UI elements, unless selection color customization is disabled by the option useThemedSelectionColors.
uiSelectionForeground
Foreground color of selected UI elements, unless selection color customization is disabled by the option useThemedSelectionColors.
Plugin style settings
frames
Allows you to override frames style settings to customize the appearance of the frames rendered around code blocks.
textMarkers
Allows you to override text markers style settings to customize the appearance of the text markers used to highlight parts inside code blocks.
collapsibleSections
Allows you to override collapsible sections style settings to customize the appearance of collapsed and expanded sections inside code blocks.