Registry / web-framework / react-syntax-highlighter

react-syntax-highlighter

library16.1.1jsnpmunverified

React Syntax Highlighter is a component designed for rendering syntax-highlighted code blocks within React applications. It leverages the robust `lowlight` and `refractor` libraries (which in turn use PrismJS or Highlight.js ASTs) to generate a virtual DOM structure, allowing for efficient updates without `dangerouslySetInnerHTML`. The current stable version is 16.1.1. Releases occur as needed, with a mix of patch fixes and occasional major version updates (e.g., v16.0.0). Key differentiators include its use of a syntax tree for DOM manipulation (leading to more idiomatic React usage and better performance for dynamic updates), and its support for JavaScript-based inline styling for all Highlight.js and PrismJS themes, while also providing an option for traditional CSS class-based styling.

web-framework

npm install react-syntax-highlighter

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-SYNTAX-HIGHL

react-syntax-highlighter

web-frameworkjavascriptv16.1.1

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.

SyntaxHighlighter

✓ import { SyntaxHighlighter } from 'react-syntax-highlighter';

✗ import SyntaxHighlighter from 'react-syntax-highlighter';

The primary component is a named export. Ensure you are using named imports. For CommonJS, use `const { SyntaxHighlighter } = require('react-syntax-highlighter');`

atomDark (Highlight.js style)

✓ import { atomDark } from 'react-syntax-highlighter/dist/esm/styles/hljs';

✗ import atomDark from 'react-syntax-highlighter/styles/hljs/atom-dark';

Styles are provided as named exports from specific paths. For ESM environments, use the `dist/esm` path. For CommonJS, use `dist/cjs` (e.g., `require('react-syntax-highlighter/dist/cjs/styles/hljs').atomDark`).

dracula (Prism.js style)

✓ import { dracula } from 'react-syntax-highlighter/dist/esm/styles/prism';

✗ import dracula from 'react-syntax-highlighter/styles/prism/dracula';

Similar to Highlight.js styles, Prism.js themes require explicit `dist/esm` (for ESM) or `dist/cjs` (for CommonJS) paths, and are named exports.

Demonstrates the basic usage of `react-syntax-highlighter` by displaying a TypeScript code block with the Atom Dark theme.

import React from 'react'; import { SyntaxHighlighter } from 'react-syntax-highlighter'; import { atomDark } from 'react-syntax-highlighter/dist/esm/styles/hljs'; const codeString = ` function greet(name: string): string { return \"Hello, \" + name + \"!\"; } const message: string = greet(\"World\"); console.log(message); // Outputs: Hello, World! // Example of an asynchronous operation async function fetchData() { const response = await fetch('https://api.example.com/data'); const data = await response.json(); return data; } `; const MyHighlightedCode = () => { return ( <SyntaxHighlighter language="typescript" style={atomDark}> {codeString} </SyntaxHighlighter> ); }; export default MyHighlightedCode;

Debug

Known issues

breakingVersion 16.0.0 introduced a major update to the `refractor` dependency (to version 5), which addressed security issues. This update could lead to breaking changes or incompatibilities with your application's existing dependencies that rely on older `refractor` versions.

fix

Thoroughly review `refractor`'s changelog for version 5 and conduct comprehensive testing of your application after upgrading. Ensure all related transitive dependencies are compatible with the new `refractor` version.

affects: >=16.0.0

gotchaThe package increasingly supports and recommends ESM. While CommonJS builds (`dist/cjs`) exist, direct imports of styles and other sub-modules often require explicit `dist/esm` paths, especially in modern bundlers or Node.js environments configured for ESM. Missing `.js` extensions in ESM imports were specifically fixed in v16.1.1.

fix

For ESM environments, explicitly use `import ... from 'react-syntax-highlighter/dist/esm/...'` paths, ensuring your bundler is correctly configured. For CommonJS, use `require('react-syntax-highlighter/dist/cjs/...')`. Always verify the correct import path based on your module system.

affects: >=16.1.1

gotchaBy default, `react-syntax-highlighter` applies styles using JavaScript-based inline styles (`useInlineStyles: true`). If you intend to style the code blocks using traditional CSS files and class selectors, you must explicitly set the `useInlineStyles` prop to `false`.

fix

To enable CSS-based styling, pass `useInlineStyles={false}` to the `SyntaxHighlighter` component. This will apply class names to the elements, allowing external CSS rules to take precedence.

affects: >=0.14.0

gotchaFor TypeScript projects, installing the `@types/react-syntax-highlighter` package as a development dependency is highly recommended to ensure proper type inference, autocomplete, and to prevent TypeScript or ESLint errors, even if the library itself ships some internal type definitions.

fix

Install the type definitions by running `npm install --save-dev @types/react-syntax-highlighter` or `pnpm add -D @types/react-syntax-highlighter`.

affects: *

Errors

Common errors & fixes

Error: Cannot find module 'react-syntax-highlighter/styles/hljs/atom-dark'

Incorrect import path for styles, or attempting to load ESM paths in a CJS environment without proper resolution.

fix

Update your import statement to use the correct `dist/esm` or `dist/cjs` path and module export pattern, e.g., `import { atomDark } from 'react-syntax-highlighter/dist/esm/styles/hljs';`.

TypeError: SyntaxHighlighter is not a function or a component

This usually occurs when attempting to use a default import for `SyntaxHighlighter`, which is a named export, or an incorrect CommonJS `require` pattern.

fix

Ensure you are using named imports: `import { SyntaxHighlighter } from 'react-syntax-highlighter';`. For CommonJS, use `const { SyntaxHighlighter } = require('react-syntax-highlighter');`.

Property 'children' does not exist on type 'IntrinsicAttributes & { ... }'

This is a common TypeScript error indicating that the type definitions for `react-syntax-highlighter` are not correctly installed or recognized, usually due to a missing `@types` package.

fix

Install the official TypeScript type definitions as a dev dependency: `npm install --save-dev @types/react-syntax-highlighter` or `pnpm add -D @types/react-syntax-highlighter`.

Upgrade

Version history

16.1.1latest on npm

Audit

Dependencies

reactrequiredPeer dependency for the React component's rendering.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/react-syntax-highlighter/react-syntax-highlighter ↗

packagehttps://www.npmjs.com/package/react-syntax-highlighter ↗