Updated react-highlight package for syntax highlighting in React using highlight.js.

Usage no npm install needed!

<script type="module">
  import reactHighlightUpdated from '';


react-highlight-updated npm version Build Status

Updated react-highlight package for syntax highlighting in React using highlight.js.

This version was created because the react-highlight package we were using as part of a documentation site was out of date and breaking our test cases. Refactored to a functional component, rewrote refs, updated all build packages and added documentation into the distribution package. This is a breaking change to the original react-highlight package.
Note: This package now has a peer dependency on React version 16.8.6 due to useEffect and useRef.

Latest version



  npm install react-highlight-updated highlight.js --save


Importing component

import Highlight from "react-highlight";

Adding styles - Two methods


Choose the theme for syntax highlighting and add corresponding styles of highlight.js

  <link rel="stylesheet" href="/path/to/styles/theme-name.css">

The styles will most likely be in node_modules/highlight.js/styles folder.

Import into file

Inside the file that highlight will be used (or a parent file of multiple children), import the stylesheet.

import "/path/to/styles/theme-name.css";


  • className: custom class name
  • innerHTML: enable to render markup with dangerouslySetInnerHTML
  • element: render code snippet inside specified element


Code Sandbox Example

Edit react-highlight-updated

Syntax highlighting of single code snippet

Code snippet that requires syntax highlighting should be passed as children to Highlight component in string format. Language name of code snippet should be specified as className.

<Highlight className="language-name-of-snippet">
  {"code snippet to be highlighted"}

Syntax highlighting of mutiple code snippets

Set innerHTML=true to highlight multiple code snippets at a time. This is especially useful if html with multiple code snippets is generated from preprocesser tools like markdown.

Warning: If innerHTML is set to true, make sure the html generated with code snippets is from trusted source.

<Highlight innerHTML="{true}"> {"html with multiple code snippets"} </Highlight>