React Syntax Highlighter

Common errors

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

  cause `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.

  cause 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).

  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.
  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.

Warnings

• breaking 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`.
  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.
• gotcha 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.
  Fix: Ensure you import a `highlight.js` CSS theme (from `node_modules/highlight.js/styles/`) into your project or link it in your HTML.
• gotcha 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.
  Fix: Only use `innerHTML={true}` with HTML content that you completely trust or have thoroughly sanitized using a library like DOMPurify.

Install

• npm install react-highlight npm
• yarn add react-highlight yarn
• pnpm add react-highlight pnpm

Imports

• Highlight
  wrong:

  import { Highlight } from 'react-highlight'

  correct:

  import Highlight from 'react-highlight'

  The `Highlight` component is a default export.
• Highlight (CommonJS)
  wrong:

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

  correct:

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

  When using CommonJS, access the default export via `.default` due to ES module interop.
• highlight.js themes
  wrong:

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

  correct:

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

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

Quickstart

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">
  &lt;div&gt;Hello HTML&lt;/div&gt;
</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;