Registry / web-framework / react-highlight

react-highlight

library0.15.0jsnpmunverified

react-highlight is a React component designed to provide syntax highlighting for code snippets within web applications by integrating the `highlight.js` library. It allows developers to display formatted code by passing code strings as children to the `Highlight` component or by rendering pre-processed HTML containing multiple code blocks. The current stable version available on npm is `0.15.0`. However, the project's README specifies `0.11.1` as the 'latest version', which suggests potential documentation lag or an irregular release cadence. A key differentiator is its direct, minimalist wrapper around `highlight.js`, making it straightforward for both single-snippet and multi-snippet highlighting, especially useful when parsing markdown-generated content. Styling is handled externally via `highlight.js` CSS themes, requiring manual inclusion.

web-framework serialization

npm install react-highlight

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-HIGHLIGHT

react-highlight

web-frameworkjavascriptv0.15.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Highlight

✓ import Highlight from 'react-highlight'

✗ import { Highlight } from 'react-highlight'

The `Highlight` component is a default export.

Highlight (CommonJS)

✓ const Highlight = require('react-highlight').default;

✗ const Highlight = require('react-highlight');

When using CommonJS, access the default export via `.default` due to ES module interop.

highlight.js themes

✓ import 'highlight.js/styles/github.css';

✗ import { github } from 'highlight.js/styles';

Highlight.js themes are CSS files and must be imported directly or linked in HTML. They are not JavaScript modules.

Demonstrates basic usage of `react-highlight` for a single JavaScript snippet and multiple snippets from an HTML string, including importing a `highlight.js` theme.

import React from 'react'; import Highlight from 'react-highlight'; import 'highlight.js/styles/github.css'; // Or any other highlight.js theme function MyHighlightedCode() { const jsCode = ` const greet = (name) => { console.log('Hello, ' + name + '!'); }; greet('World'); `; const htmlContent = ` <h1>Example</h1> <pre><code class="language-html"> <div>Hello HTML</div> </code></pre> <pre><code class="language-css"> .container { color: blue; } </code></pre> `; return ( <div> <h2>JavaScript Example</h2> <Highlight className='language-javascript'> {jsCode} </Highlight> <h2>Multi-snippet HTML Example</h2> <Highlight innerHTML={true}> {htmlContent} </Highlight> </div> ); } export default MyHighlightedCode;

Debug

Known issues

breakingThe README states 'Latest version `0.11.1`' while the npm package is `0.15.0`. This discrepancy can lead to confusion regarding API changes or available features between what's documented and what's published. Always refer to the `npm` changelog or GitHub releases for the most accurate information on `0.15.0`.

fix

Always check the `package.json` and official npm registry for the installed version and refer to the project's GitHub release notes for specific version changes.

affects: >=0.11.1

gotchaSyntax highlighting styles are not bundled with `react-highlight`. You must explicitly import or link a `highlight.js` CSS theme (e.g., `import 'highlight.js/styles/github.css';`) for any styling to appear. Without this, code will not be visibly highlighted.

fix

Ensure you import a `highlight.js` CSS theme (from `node_modules/highlight.js/styles/`) into your project or link it in your HTML.

affects: >=0.1.0

gotchaUsing `innerHTML={true}` to highlight multiple code snippets can expose your application to Cross-Site Scripting (XSS) vulnerabilities if the HTML content is not from a trusted source. Ensure that any HTML passed with `innerHTML` is sanitized.

fix

Only use `innerHTML={true}` with HTML content that you completely trust or have thoroughly sanitized using a library like DOMPurify.

affects: >=0.1.0

Errors

Common errors & fixes

SyntaxError: Named export 'Highlight' not found. Did you mean 'default'?

`Highlight` is a default export, but you are trying to import it as a named export.

fix

Change your import statement from `import { Highlight } from 'react-highlight'` to `import Highlight from 'react-highlight'`.

Code snippets are displayed as plain text without any highlighting colors or formatting.

The required `highlight.js` CSS theme has not been imported or linked, meaning there are no styles applied to the highlighted code.

fix

Add an import for a `highlight.js` theme, for example: `import 'highlight.js/styles/atom-one-dark.css';` in your main application entry file or component.

Warning: Each child in a list should have a unique 'key' prop. (When using `innerHTML={true}` with React Developer Tools enabled).

While `react-highlight` handles `innerHTML` internally, React often warns about dynamic content without keys if it expects a list of children. This warning typically arises when React's reconciler attempts to optimize or track elements within the `dangerouslySetInnerHTML` output, although `react-highlight` itself might not directly produce list children.

fix

This warning is often benign in the context of `dangerouslySetInnerHTML` for a single HTML string with `react-highlight`, as the component manages the inner HTML. If it becomes problematic or indicates a deeper issue with how the HTML is structured, ensure the HTML content itself is well-formed.

Upgrade

Version history

0.15.0latest on npm

Audit

Dependencies

highlight.jsrequiredProvides the core syntax highlighting logic and required CSS themes.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/akiran/react-highlight ↗

packagehttps://www.npmjs.com/package/react-highlight ↗