https://github.com/mxmzb/gatsby-remark-color-highlight
Gatsby plugin to highlight color hexcodes. 🌈
https://github.com/mxmzb/gatsby-remark-color-highlight
Last synced: 6 months ago
JSON representation
Gatsby plugin to highlight color hexcodes. 🌈
- Host: GitHub
- URL: https://github.com/mxmzb/gatsby-remark-color-highlight
- Owner: mxmzb
- License: mit
- Created: 2020-02-13T19:02:55.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T07:15:40.000Z (over 2 years ago)
- Last Synced: 2024-12-22T19:03:15.923Z (6 months ago)
- Language: JavaScript
- Homepage: https://maximzubarev.com/project/gatsby-remark-color-highlight
- Size: 1.3 MB
- Stars: 6
- Watchers: 2
- Forks: 0
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
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](https://maximzubarev.com/how-to-create-a-gatsby-js-transformer-plugin).
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
```javascript
// 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"]`