highlight-plus is a React component built on top of react-highlight, extending its functionality by allowing you to highlight specific words within the syntax-highlighted code.
It provides an easy way to highlight keywords, variables, or any other word within the syntax-highlighted code snippet.
-
Built on top of
react-highlight, so it supports various programming languages for syntax highlighting. -
Allows highlighting of specific word within the syntax highlighted code.
-
Customizable highlight color with support for all legal CSS color values (hexadecimal, RGB, RGBA, HSL, HSLA, predefined).
-
To install via
npm:npm install highlight-plus
-
To install via
yarn:yarn add highlight-plus
Requires react and react-dom version 19.0.0 or higher (peer dependencies).
-
Basic Usage:
import React from 'react'; import HighlightPlus from "highlight-plus"; const MyComponent = () => { const code_string = ` function helloHighlightPlus () { const greet_msg = "Hello, highlight-plus"; console.log(greet_msg); } `; const word_to_highlight = "high"; return ( <div> <h1>Highlight Plus example one</h1> <HighlightPlus language="javascript" word_to_highlight={word_to_highlight} code_content={code_string} /> </div> ); }
-
With custom highlight color:
import React from 'react'; import HighlightPlus from "highlight-plus"; const MyComponent = () => { const code_string = ` function helloHighlightPlus () { const greet_msg = "Hello, highlight-plus"; console.log(greet_msg); } `; const word_to_highlight = "high"; return ( <div> <h1>Highlight Plus example two</h1> <HighlightPlus language="javascript" word_to_highlight={word_to_highlight} highlight_color="#ff6347" code_content={code_string} /> </div> ); }
| Prop name | Description | Data type | Default value |
|---|---|---|---|
| code_content | Code to be displayed | string | "" |
| word_to_highlight | String to be highlighted | string | "" |
| language | Programming language of the code to be displayed | string | auto-detected |
| highlight_color | Background color of the highlighted string | string | yellow |
Matching is case-sensitive and matches on substrings (e.g. "high" also matches inside "highlight"). If word_to_highlight is empty or whitespace-only, no highlighting is applied and the code is rendered unmodified.
highlight-plus ships its own type declarations, so no extra @types package is needed. The prop types are exported as HighlightPlusProps:
import HighlightPlus, { HighlightPlusProps } from "highlight-plus";highlight.js offers a wide range of themes to choose from for syntax highlighting. You can find various CSS files for different themes at cdnjs.com.
To use a custom theme, simply link CSS in the <head> tag in your HTML file or just import the desired CSS file at the top of your CSS.
Example 1: Linking CSS inside the <head> tag
<html>
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/1c-light.min.css"
/>
</head>
<body></body>
</html>Example 2: Importing in CSS file
@import url("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/1c-light.min.css");Found a bug or have a suggestion? Open an issue at github.com/Pranav-Rustagi/highlight-plus/issues.
This project is licensed under the MIT License. See the LICENSE file for details.