{"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.","language":"javascript","status":"maintenance","last_verified":"Sun Apr 19","install":{"commands":["npm install react-highlight"],"cli":null},"imports":["import Highlight from 'react-highlight'","const Highlight = require('react-highlight').default;","import 'highlight.js/styles/github.css';"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}