{"id":14871,"library":"react-highlight","title":"React Syntax Highlighter","description":"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.","status":"maintenance","version":"0.15.0","language":"javascript","source_language":"en","source_url":"https://github.com/akiran/react-highlight","tags":["javascript","react","highlight.js","syntax","highlighting","react-component"],"install":[{"cmd":"npm install react-highlight","lang":"bash","label":"npm"},{"cmd":"yarn add react-highlight","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-highlight","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Provides the core syntax highlighting logic and required CSS themes.","package":"highlight.js","optional":false}],"imports":[{"note":"The `Highlight` component is a default export.","wrong":"import { Highlight } from 'react-highlight'","symbol":"Highlight","correct":"import Highlight from 'react-highlight'"},{"note":"When using CommonJS, access the default export via `.default` due to ES module interop.","wrong":"const Highlight = require('react-highlight');","symbol":"Highlight (CommonJS)","correct":"const Highlight = require('react-highlight').default;"},{"note":"Highlight.js themes are CSS files and must be imported directly or linked in HTML. They are not JavaScript modules.","wrong":"import { github } from 'highlight.js/styles';","symbol":"highlight.js themes","correct":"import 'highlight.js/styles/github.css';"}],"quickstart":{"code":"import React from 'react';\nimport Highlight from 'react-highlight';\nimport 'highlight.js/styles/github.css'; // Or any other highlight.js theme\n\nfunction MyHighlightedCode() {\n  const jsCode = `\nconst greet = (name) => {\n  console.log('Hello, ' + name + '!');\n};\n\ngreet('World');\n`;\n\n  const htmlContent = `\n<h1>Example</h1>\n<pre><code class=\"language-html\">\n  &lt;div&gt;Hello HTML&lt;/div&gt;\n</code></pre>\n<pre><code class=\"language-css\">\n  .container {\n    color: blue;\n  }\n</code></pre>\n`;\n\n  return (\n    <div>\n      <h2>JavaScript Example</h2>\n      <Highlight className='language-javascript'>\n        {jsCode}\n      </Highlight>\n\n      <h2>Multi-snippet HTML Example</h2>\n      <Highlight innerHTML={true}>\n        {htmlContent}\n      </Highlight>\n    </div>\n  );\n}\n\nexport default MyHighlightedCode;","lang":"typescript","description":"Demonstrates basic usage of `react-highlight` for a single JavaScript snippet and multiple snippets from an HTML string, including importing a `highlight.js` theme."},"warnings":[{"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.","message":"The 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`.","severity":"breaking","affected_versions":">=0.11.1"},{"fix":"Ensure you import a `highlight.js` CSS theme (from `node_modules/highlight.js/styles/`) into your project or link it in your HTML.","message":"Syntax 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.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Only use `innerHTML={true}` with HTML content that you completely trust or have thoroughly sanitized using a library like DOMPurify.","message":"Using `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.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Change your import statement from `import { Highlight } from 'react-highlight'` to `import Highlight from 'react-highlight'`.","cause":"`Highlight` is a default export, but you are trying to import it as a named export.","error":"SyntaxError: Named export 'Highlight' not found. Did you mean 'default'?"},{"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.","cause":"The required `highlight.js` CSS theme has not been imported or linked, meaning there are no styles applied to the highlighted code.","error":"Code snippets are displayed as plain text without any highlighting colors or formatting."},{"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.","cause":"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.","error":"Warning: Each child in a list should have a unique 'key' prop. (When using `innerHTML={true}` with React Developer Tools enabled)."}],"ecosystem":"npm"}