{"library":"react-syntax-highlighter","title":"React Syntax Highlighter","description":"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-syntax-highlighter"],"cli":null},"imports":["import { SyntaxHighlighter } from 'react-syntax-highlighter';","import { atomDark } from 'react-syntax-highlighter/dist/esm/styles/hljs';","import { dracula } from 'react-syntax-highlighter/dist/esm/styles/prism';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport { SyntaxHighlighter } from 'react-syntax-highlighter';\nimport { atomDark } from 'react-syntax-highlighter/dist/esm/styles/hljs';\n\nconst codeString = `\nfunction greet(name: string): string {\n  return \\\"Hello, \\\" + name + \\\"!\\\";\n}\n\nconst message: string = greet(\\\"World\\\");\nconsole.log(message); // Outputs: Hello, World!\n\n// Example of an asynchronous operation\nasync function fetchData() {\n  const response = await fetch('https://api.example.com/data');\n  const data = await response.json();\n  return data;\n}\n`;\n\nconst MyHighlightedCode = () => {\n  return (\n    <SyntaxHighlighter language=\"typescript\" style={atomDark}>\n      {codeString}\n    </SyntaxHighlighter>\n  );\n};\n\nexport default MyHighlightedCode;","lang":"typescript","description":"Demonstrates the basic usage of `react-syntax-highlighter` by displaying a TypeScript code block with the Atom Dark theme.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}