Getting Started

The Color Chips plugin extends Expressive Code to display a preview “chip” for colors in CSS code blocks. This guide will show you how to add it to your website.

Set-up

1. Install the expressive-code-color-chips dependency using your preferred package manager:

   npm

   npm i expressive-code-color-chips

   pnpm

   pnpm add expressive-code-color-chips

   yarn

   yarn add expressive-code-color-chips

2. Add the plugin to your site’s Expressive Code configuration:

   Astro

   astro.config.mjs

   import { defineConfig } from 'astro/config';
   import astroExpressiveCode from 'astro-expressive-code';
   import { pluginColorChips } from 'expressive-code-color-chips';
   
   export default defineConfig({
     integrations: [
       astroExpressiveCode({
         plugins: [pluginColorChips()],
       }),
     ],
   });

   Starlight

   astro.config.mjs

   import { defineConfig } from 'astro/config';
   import starlight from '@astrojs/starlight';
   import { pluginColorChips } from 'expressive-code-color-chips';
   
   export default defineConfig({
     integrations: [
       starlight({
         title: 'My Starlight site',
         expressiveCode: {
           plugins: [pluginColorChips()],
         },
       }),
     ],
   });

   Next.js

   next.config.mjs

   import createMDX from '@next/mdx';
   import rehypeExpressiveCode from 'rehype-expressive-code';
   import { pluginColorChips } from 'expressive-code-color-chips';
   
   /** @type {import('rehype-expressive-code').RehypeExpressiveCodeOptions} */
   const rehypeExpressiveCodeOptions = {
     plugins: [pluginColorChips()],
   };
   
   /** @type {import('next').NextConfig} */
   const nextConfig = {
     reactStrictMode: true,
     pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx'],
   };
   
   const withMDX = createMDX({
     extension: /\.mdx?$/,
     options: {
       remarkPlugins: [],
       rehypePlugins: [
         // The nested array structure is required to pass options
         // to a rehype plugin
         [rehypeExpressiveCode, rehypeExpressiveCodeOptions],
       ],
     },
   });
   
   export default withMDX(nextConfig);

   EC config file

   ec.config.mjs

   import { pluginColorChips } from 'expressive-code-color-chips';
   
   export default {
     plugins: [pluginColorChips()],
   };

3. That’s it! Colors in CSS code blocks will now be annotated with a small preview.

Usage

There is no specific syntax for this plugin. It detects CSS color syntax in code blocks tagged with css and annotates all valid colors it finds.

For example the following Markdown code:

```css
.example {
  color: goldenrod;
}
```

Renders a code block with a chip next to the color goldenrod:

.example {
  color: goldenrod;
}

In addition to css, this plugin also runs for scss, sass, less, and stylus code blocks. For example:

```scss
$primary: fuchsia;
```

Which renders as:

$primary: fuchsia;

Support

This is open-source software. If you run into any bugs, please report issues on GitHub.