react-syntax-highlighter

react-syntax-highlighter is a powerful and flexible React component designed for displaying code snippets with syntax highlighting. It acts as a wrapper around popular syntax highlighting libraries like `highlight.js` or `prism.js` (through `lowlight`), abstracting away the complexities and providing a simple, declarative API for React applications.

Why use react-syntax-highlighter?
In applications like blogs, documentation sites, tutorials, or online code editors, presenting code in a readable and visually appealing manner is crucial. `react-syntax-highlighter` solves this by:
1. Readability: Applying distinct colors and styles to different parts of the code (keywords, strings, comments, etc.) makes it easier to understand and parse.
2. Aesthetics: Enhances the visual appeal of your application, making code examples look professional and integrated.
3. Cross-Browser Compatibility: Handles the intricacies of rendering highlighted code consistently across different browsers.
4. Language Support: Supports a vast array of programming languages out-of-the-box.
5. Theming: Offers numerous pre-built themes, allowing developers to easily switch between light and dark modes or match the application's design system.
6. Customization: Provides options for custom styling, line numbering, and other display preferences.

Key Features:
* Extensive Language Support: Compatible with hundreds of languages supported by `highlight.js` or `prism.js`.
* Multiple Themes: Comes with a wide selection of themes (e.g., `dracula`, `atom-dark`, `github`, `solarized-light`) that can be easily imported and applied.
* Line Numbering: Option to display line numbers alongside the code, useful for longer snippets or educational content.
* Custom Styling: Allows for overriding default styles for the code block, line numbers, or individual tokens via a `customStyle` prop or by modifying imported themes.
* Code Block vs. Inline Code: While primarily designed for code blocks, it can be adapted for inline code snippets as well.
* Server-Side Rendering (SSR) Support: Works seamlessly in SSR environments without issues.

Installation:
To use `react-syntax-highlighter`, you first need to install it:
`npm install react-syntax-highlighter`
or
`yarn add react-syntax-highlighter`

You then import the `SyntaxHighlighter` component and your chosen theme. Themes are typically imported from `react-syntax-highlighter/dist/esm/styles/hljs` (for `highlight.js` themes) or `react-syntax-highlighter/dist/esm/styles/prism` (for `prism.js` themes).

Usage:
You pass the code string as children to the `SyntaxHighlighter` component, specify the `language` prop (e.g., "javascript", "python", "jsx"), and apply a `style` prop with your chosen theme.

import React from 'react';
import { SyntaxHighlighter } from 'react-syntax-highlighter';
// Import a theme from the prism styles
// You can choose between 'hljs' (highlight.js) or 'prism' (Prism.js) styles
import { dracula } from 'react-syntax-highlighter/dist/esm/styles/prism';

function CodeDisplay() {
  const codeString = `function greet(name) {
  console.log('Hello, ' + name + '!');
}

const myName = 'World';
greet(myName); // Outputs: Hello, World!
`;

  return (
    <div>
      <h1>Code Example: JavaScript Function</h1>
      <SyntaxHighlighter language="javascript" style={dracula} showLineNumbers>
        {codeString}
      </SyntaxHighlighter>

      <h2>Another Example: React Component</h2>
      <SyntaxHighlighter language="jsx" style={dracula} showLineNumbers={false}>
        {`import React from 'react';

function MyComponent() {
  return (
    <div>
      <p>This is a React component.</p>
      <button onClick={() => alert('Hello!')}>Click Me</button>
    </div>
  );
}

export default MyComponent;
`}
      </SyntaxHighlighter>
    </div>
  );
}

export default CodeDisplay;