react-marker
crayon Highlight keywords and add colors to your text
Install
npm install react-marker
This package also depends on React, so make sure you've already installed it.
Demo
Usage
Highlighting keywords
To highlight keywords automatically in your text, use Keywords
component. Here is an example -
This then renders to -
Highlight the text with different colors
This was inspired by Titus Wormer's work
This renders to -
Another example -
API
react-marker
exposes only two components, Highlight
and Keywords
.
Components
-
Keywords
Highlight keywords in your text.
Props | Default value | Description |
---|---|---|
text |
"" | Text paragraph |
maxKeywords |
5 | Max. no of keywords to highlight |
color |
hsl(60, 91%, 83%) |
Color used to highlight the keywords |
-
Highlight
Highlight your text with different hue range.
Props | Default value | Description |
---|---|---|
text |
"" | Text paragraph |
TODO
- [ ] Gatsby plugin