Configuration

After adding the Color Chips plugin to your Expressive Code config as shown in the set-up guide, no further configuration is required.

If you want to customize the behaviour of the plugin, you can pass options to pluginColorChips() and use Expressive Code’s style overrides.

Additional languages

By default, the plugin annotates colors in css, scss, sass, less, and stylus code blocks. Use the languages option to control which languages get color chips, for example to enable them for another language that includes color values.

{
  plugins: [pluginColorChips({ languages: ['css', 'json'] })],
},

The value you provide replaces the defaults, so include any of the built-in CSS dialects you still want to annotate.

Styling

You can provide custom styles in your Expressive Code config using the styleOverrides.colorChips object.

For example, to display square chips instead of the default round style, set borderRadius to zero:

{
  plugins: [pluginColorChips()],
  styleOverrides: {
    colorChips: {
      borderRadius: 0,
    },
  },
},

Available style overrides

size

Default: "1.2em"

The size of each color chip.

borderWidth

Default: "1px"

The width of the border around each color chip.

borderRadius

Default: "50%"

The roundness of each color chip.

borderColor

Default: ({ theme }) => theme.fg

The color of the border around each chip.

transparencyShadeOne

Default: ["#777", "#fff"]

The first of two shades used in the checkerboard background for transparent colors.

transparencyShadeTwo

Default: ["#000", "#bbb"]

The second of two shades used in the checkerboard background for transparent colors.