### Configure Expressive Code with Color Chips Plugin

Source: https://github.com/delucis/expressive-code-color-chips/blob/main/docs/src/content/docs/getting-started.mdx

Configures Expressive Code directly using a configuration file to include the `expressive-code-color-chips` plugin.

```javascript
import { pluginColorChips } from 'expressive-code-color-chips';

export default {
	plugins: [pluginColorChips()],
};
```

--------------------------------

### CSS Color Chip Preview Example

Source: https://github.com/delucis/expressive-code-color-chips/blob/main/docs/src/content/docs/getting-started.mdx

Demonstrates how the Expressive Code Color Chips plugin renders a preview chip next to a CSS color value.

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

--------------------------------

### SCSS Color Chip Preview Example

Source: https://github.com/delucis/expressive-code-color-chips/blob/main/docs/src/content/docs/getting-started.mdx

Shows the plugin's functionality with SCSS, displaying a chip for a color variable.

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

--------------------------------

### Configure Astro with Color Chips Plugin

Source: https://github.com/delucis/expressive-code-color-chips/blob/main/docs/src/content/docs/getting-started.mdx

Integrates the `expressive-code-color-chips` plugin into an Astro project's Expressive Code configuration to enable color chip previews.

```javascript
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()],
		}),
	],
});
```

--------------------------------

### Configure Starlight with Color Chips Plugin

Source: https://github.com/delucis/expressive-code-color-chips/blob/main/docs/src/content/docs/getting-started.mdx

Adds the `expressive-code-color-chips` plugin to a Starlight site's Expressive Code configuration, enabling color chip previews.

```javascript
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()],
			},
		}),
	],
});
```

--------------------------------

### Configure Next.js with Color Chips Plugin

Source: https://github.com/delucis/expressive-code-color-chips/blob/main/docs/src/content/docs/getting-started.mdx

Sets up Next.js to use the `expressive-code-color-chips` plugin via `rehype-expressive-code` for color chip previews in MDX content.

```javascript
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);
```

--------------------------------

### CSS Color Previews

Source: https://github.com/delucis/expressive-code-color-chips/blob/main/docs/src/content/docs/index.mdx

This CSS code demonstrates how to use different color formats within CSS properties. It includes examples of named colors, hexadecimal values, HSL color functions, system colors, and linear gradients with transparency. The plugin likely uses these formats to generate visual color chips.

```css
.chips {
	/* CSS named colors */
	color: red;
	/* Hexadecimal colors */
	background-color: #fff;
	/* HSL color functions */
	border-color: hsl(0, 0%, 0%);
	/* System colors */
	outline-color: SelectedItem;
	/* Transparent colors */
	background: linear-gradient(rgba(0, 0, 255, 0.25), rgba(0, 0, 255, 0.75));
	/* And more… */
	--more: oklch(70% 0.1 72);
}
```

--------------------------------

### Customize Color Chip Appearance

Source: https://github.com/delucis/expressive-code-color-chips/blob/main/docs/src/content/docs/configuration.mdx

Configure the Expressive Code Color Chips plugin to customize the visual appearance of color chips, such as changing them from round to square by setting `borderRadius` to 0.

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

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.