gatsby-remark-color-highlight
Adds color highlighting to hex codes in your markdown content.
Alongside this plugin I've written a tutorial on creating Gatsby.js plugins.
This is a sub-plugin for gatsby-transformer-remark
. As demoed below, add this plugin to the options of gatsby-transformer-remark
.
Install
npm install --save gatsby-remark-color-highlight
How to use
// In your gatsby-config.js
module.exports = {
plugins: [
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [`gatsby-remark-color-highlight`],
},
},
],
};
Note: If you are using gatsby-remark-vscode
and want to highlight color hexcodes in your code examples, make sure that itβs listed before this plugin.
Options
wrapperElement
: The tag that you want to wrap your color hexcodes with. Defaults to"code"
className
: The class you want to add to your wrapping element. This can not be set to an empty value. Defaults to"color-highlight"
searchNodeTypes
: The AST node types that you want to search for color hexcodes. Will search all child nodes deeply. Defaults to["text", "paragraph", "inlineCode", "html"]