rehype-color-chips

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

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

On GitHub issues:

On a page with this plugin:

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.

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.

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,
    ],
  },
})

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;