Style Overrides

EC-Twoslash provides several options for customizing the appearance of code blocks, including the ability to override default styles. This section covers the various style override options available in EC-Twoslash, allowing you to tailor the look and feel of your code examples to better fit your project’s design.

Example Configuration:

import { 
function defineEcConfig(config: AstroExpressiveCodeOptions): AstroExpressiveCodeOptions
A utility function that helps you define an Expressive Code configuration object. It is meant
to be used inside the optional config file ec.config.mjs located in the root directory
of your Astro project, and its return value to be exported as the default export.
Expressive Code will automatically detect this file and use the exported configuration object
to override its own default settings.
Using this function is recommended, but not required. It just passes through the given object,
but it also provides type information for your editor's auto-completion and type checking.
@example 
// ec.config.mjs
import { defineEcConfig } from 'astro-expressive-code'

export default defineEcConfig({
  themes: ['dracula', 'github-light'],
  styleOverrides: {
    borderRadius: '0.5rem',
  },
})
defineEcConfig } from 'astro-expressive-code';
import 
function ecTwoSlash(options?: PluginTwoslashOptions): ExpressiveCodePlugin
Add Twoslash support to your Expressive Code TypeScript code blocks.
@param ― options - Configuration options for the plugin.
@see ― https://twoslash.studiocms.dev for the full documentation.
@returns ― A plugin object with the specified configuration.
ecTwoSlash from "expressive-code-twoslash";

export default 
function defineEcConfig(config: AstroExpressiveCodeOptions): AstroExpressiveCodeOptions
A utility function that helps you define an Expressive Code configuration object. It is meant
to be used inside the optional config file ec.config.mjs located in the root directory
of your Astro project, and its return value to be exported as the default export.
Expressive Code will automatically detect this file and use the exported configuration object
to override its own default settings.
Using this function is recommended, but not required. It just passes through the given object,
but it also provides type information for your editor's auto-completion and type checking.
@example 
// ec.config.mjs
import { defineEcConfig } from 'astro-expressive-code'

export default defineEcConfig({
  themes: ['dracula', 'github-light'],
  styleOverrides: {
    borderRadius: '0.5rem',
  },
})
defineEcConfig({
  
plugins?: (ExpressiveCodePlugin | ExpressiveCodePlugin[])[] | undefined
An optional array of plugins that should be used when rendering code blocks.
To add a plugin, import its initialization function and call it inside this array.
If the plugin has any configuration options, you can pass them to the initialization
function as an object containing your desired property values.
If any nested arrays are found inside the plugins array, they will be flattened
before processing.
plugins: [
function ecTwoSlash(options?: PluginTwoslashOptions): ExpressiveCodePlugin
Add Twoslash support to your Expressive Code TypeScript code blocks.
@param ― options - Configuration options for the plugin.
@see ― https://twoslash.studiocms.dev for the full documentation.
@returns ― A plugin object with the specified configuration.
ecTwoSlash()],
  
styleOverrides?: Partial<{
    frames: Partial<UnresolvedPluginStyleSettings<FramesStyleSettings>>;
    textMarkers: Partial<UnresolvedPluginStyleSettings<TextMarkersStyleSettings>>;
    twoSlash: Partial<UnresolvedPluginStyleSettings<TwoSlashStyleSettings>>;
    borderRadius: UnresolvedStyleValue;
    borderWidth: UnresolvedStyleValue;
    ... 24 more ...;
    scrollbarThumbHoverColor: UnresolvedStyleValue;
}> | undefined
An optional set of style overrides that can be used to customize the appearance of
the rendered code blocks without having to write custom CSS.
The root level of this nested object contains core styles like colors, fonts, paddings
and more. Plugins can contribute their own style settings to this object as well.
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.
Tip: If your site uses CSS variables for styling, you can also use these overrides
to replace any core style with a CSS variable reference, e.g. var(--your-css-var).
styleOverrides: {
    
twoSlash?: Partial<UnresolvedPluginStyleSettings<TwoSlashStyleSettings>> | undefined
twoSlash: {
      // Style override options go here
    },
  },
})

Main Style Overrides

borderColor

Type: UnresolvedStyleValue Default:

({ theme }) => theme.colors["titleBar.border"] || lighten(theme.colors["editor.background"], theme.type === "dark" ? 0.5 : -0.15) || "transparent"

Style (Border Color) for the Twoslash Popups

background

Type: UnresolvedStyleValue Default: ({ theme }) => theme.colors["editor.background"] || theme.bg || "transparent"

Style (Background) for the Twoslash Popups

hoverUnderlineColor

Type: UnresolvedStyleValue Default: ({ theme }) => theme.fg || "#888"

Style (Hover Underline color) for the Twoslash Popups

textColor

Type: UnresolvedStyleValue Default: ({ theme }) => theme.colors["editor.foreground"] || theme.fg || "#ffffff", popupDocsMaxHeight: "200px"

Style (Text Color) for the Twoslash Popups

popupDocMaxHeight

Type: UnresolvedStyleValue Default: "200px"

Style (Docs Max Element Height) for the Twoslash Popups

tagColor

Type: UnresolvedStyleValue Default:

({ theme }) => theme.colors["terminal.ansiBrightBlue"] || theme.colors["terminal.ansiBlue"] || theme.colors.blue || "#75beff"

Style (Tag Color) for the Twoslash JSDoc Tags

Link Style Overrides

linkColor

Type: UnresolvedStyleValue Default:

({ theme }) => theme.colors["terminal.ansiBrightBlue"] || theme.colors["terminal.ansiBlue"] || theme.colors.blue || "#75beff"

Style (Link Color) for the Twoslash Popups

linkColorHover

Type: UnresolvedStyleValue Default:

({ theme }) => theme.colors["terminal.ansiBrightCyan"] || theme.colors["terminal.ansiCyan"] || theme.colors.cyan || "#75ffff"

Style (Link Hover Color) for the Twoslash Popups

linkColorVisited

Type: UnresolvedStyleValue Default:

({ theme }) => theme.colors["terminal.ansiBrightMagenta"] || theme.colors["terminal.ansiMagenta"] || theme.colors.magenta || "#ff75be"

Style (Link Visited Color) for the Twoslash Popups

linkColorActive

Type: UnresolvedStyleValue Default:

({ theme }) => theme.colors["terminal.ansiBrightGreen"] || theme.colors["terminal.ansiGreen"] || theme.colors.green || "#75ff75"

Style (Link Active Color) for the Twoslash Popups