rehype-color-chips

rehype plugin to add a color chip with an inline code block containing a supported color model.

What does this plugin do?

Turns #ef4591 to this:

Note that the 3-digit hex code doesn't work on GitHub, but works with this plugin.

Appropriate styles will need to be applied for the the color "chip" to show up.

These don't work with .md files, but work inside issues. See https://github.com/shreshthmohan/rehype-color-chips/issues/1#issue-1391093265

Installation

npm install rehype-color-chips

yarn add  rehype-color-chips

Usage

This plugin has been tested to work with next-mdx-remote. But should work with other mdx libraries too.

See it being used in a Next.js project here. Live on the website here.

import { serialize } from 'next-mdx-remote/serialize'
import rehypeColorChips from 'rehype-color-chips'

const serializedContent = await serialize(content, {
  mdxOptions: {
    remarkPlugins: [remarkGfm],
    rehypePlugins: [
      /* other rehype plugins */
      [rehypeColorChips, { customClassName: 'color-chip', location: 'after' }],
    ],
  },
})

Styling

By default, the plugin applies a gfm-color-chip class to the added element.

As an example the following styles can be applied to the color chip:

.gfm-color-chip
  margin-left: 0.125rem;
  display: inline-block;
  height: 0.625rem;
  width: 0.625rem;
  border-radius: 9999px;
  border: 1px solid gray;

You can change the class name by providing a custom value for the class attribute. Provide customClassName via options

API

rehype().use(rehypeColorChips, [options])

Adds a <span> tag with the color as background-color in the style attribute.

options

options.customClassName

Type: string Default: 'gfm-color-chip'

Adds a class to the added span element. Can be used to apply custom styles to the "color-chip".

options.location

Type: "after" | "before" Default: "after"

Controls the position of the color chip relative to the color text.

• "after" - Places the color chip after the color text (default behavior)
• "before" - Places the color chip before the color text

Example:

// Color chip appears after the color text
rehypeColorChips({ location: 'after' })

// Color chip appears before the color text
rehypeColorChips({ location: 'before' })