---
url: /api/renderers/react-markdown/src/functions/rehypeColorCodes.md
---
[pantoken-root](../../../../index.md) / [renderers/react-markdown/src](../index.md) / rehypeColorCodes

# Function: rehypeColorCodes()

> **rehypeColorCodes**(): (`tree`) => `void`

Beta

A rehype plugin that wraps standalone color values in `<span data-color-code="…">`, so the React
layer can render a swatch. Mirrors the icon-token pipeline.

## Returns

(`tree`) => `void`

## Example

```tsx
import Markdown from "react-markdown";
import { rehypeColorCodes } from "@pantoken/react-markdown";

<Markdown rehypePlugins={[rehypeColorCodes]}>Brand is #03893D.</Markdown>;
```