In the world of web development, making code snippets clear and easy to read is essential. Plenty of tools offer syntax highlighting — but what if you want to emphasise specific words in that code? That’s where highlight-plus comes in — an NPM package that extends React syntax highlighting by letting you highlight specific words within your code.

Why highlight-plus?

Built on top of react-highlight, highlight-plus keeps all the great syntax highlighting features you love — but adds the ability to highlight specific words, a feature react-highlight doesn’t support. This is especially helpful when you want to draw attention to key parts of your code, like a variable or function, making it perfect for tutorials, documentation, and code demos.

Key Features at a Glance

  • ✅ Full Syntax Highlighting: Supports a wide range of programming languages, including JavaScript and TypeScript, for clean, readable code.
  • 🎯 Highlight Specific Words: Emphasize key terms or variables right within your code snippet — a feature missing from react-highlight.
  • 🎨 Custom Highlight Colors: Supports all CSS color formats (hex, RGB, HSL, etc.) for flexible styling.
  • 🔒 Perfect for Read-Only Code: Ideal for displaying static, read-only code in blogs, documentation, or tutorials — especially when you need to guide your readers' focus.

Installation: Quick and Easy

To add highlight-plus to your React project, use npm or yarn:

npm install highlight-plus

or

yarn add highlight-plus

Getting Started: Basic Usage

Here’s a quick example to get you up and running:

import React from 'react';
import HighlightPlus from 'highlight-plus';

const ExampleComponent = () => {
    const codeString = `
        function greet() {
            const message = "Hello, World!";
            console.log(message);
        }
    `;

    const wordToHighlight = 'message';

    return (
        <div>
            <h1>Code Example with Highlighted Word</h1>
            <HighlightPlus
                language="javascript"
                word_to_highlight={wordToHighlight}
                code_content={codeString}
            />
        </div>
    );
};

In this example, the word "message" will stand out in the code snippet.

Customise Your Snippets

highlight-plus supports several props for customisation:

  • code_content: The code to display (type: string, default: "").

  • word_to_highlight: The word to highlight in the code (type: string, default: "").

  • language: Defines the programming language for syntax highlighting (type: string, default: auto-detected).

  • highlight_color: Sets the highlight color (type: string, default: yellow).

Custom Syntax Highlighting Themes

Want more control over the look and feel? You can customize the syntax highlighting theme by using any highlight.js theme. For example:

rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/1c-light.min.css"
/>

or

@import url('https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/1c-light.min.css');

Why Choose highlight-plus Over Other Libraries?

While react-highlight handles syntax highlighting, it doesn’t allow you to emphasise specific words — which is crucial when explaining code or drawing focus. highlight-plus solves that problem effortlessly.

✅ Built for Readability: Perfect for readonly code snippets in blogs, docs, and tutorials.
✅ Supports JavaScript and TypeScript: Highlight code in both JS and TS projects.
✅ Customisation First: Tailor both syntax and word highlights to fit your style.
✅ Easy to Use: Lightweight API with quick setup.

Ready to Level Up Your Code Snippets?

highlight-plus fills a gap where traditional libraries like react-highlight fall short — letting you not only apply syntax highlighting but also emphasise key words in your code snippets. With easy customisation and seamless integration, it’s a fantastic choice for projects that showcase read-only code.

For more details and to try it out, visit the highlight-plus npm page.