rehype plugin to add a color chip with an inline code block containing a supported color model.
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 #1 (comment)
npm install rehype-color-chips
yarn add rehype-color-chips
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' }],
],
},
})
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
rehype().use(rehypeColorChips, [options])
Adds a <span>
tag with the color as background-color
in the style
attribute.
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".