Standard Syntax Highlighter

/**
 * React component for syntax highlighting using highlight.js
 * @param props - Configuration props for the highlighter
 * @returns JSX element with highlighted code
 */
function SyntaxHighlighter(props: SyntaxHighlighterProps): JSX.Element;

interface SyntaxHighlighterProps {
  /** Programming language to highlight (default: auto-detect) */
  language?: string;
  /** Code string to highlight */
  children: string;
  /** Theme object for styling */
  style?: { [key: string]: React.CSSProperties };
  /** Additional styles for the pre tag */
  customStyle?: React.CSSProperties;
  /** Use inline styles vs CSS classes (default: true) */
  useInlineStyles?: boolean;
  /** Show line numbers in left gutter (default: false) */
  showLineNumbers?: boolean;
  /** Show line numbers inline with code (default: true when showLineNumbers is true) */
  showInlineLineNumbers?: boolean;
  /** Starting line number (default: 1) */
  startingLineNumber?: number;
  /** Styles for line number container */
  lineNumberContainerStyle?: React.CSSProperties;
  /** Styles for individual line numbers, can be function */
  lineNumberStyle?: React.CSSProperties | ((lineNumber: number) => React.CSSProperties);
  /** Wrap each line in a span element (default: false) */
  wrapLines?: boolean;
  /** Enable line wrapping with CSS white-space: pre-wrap (default: false) */
  wrapLongLines?: boolean;
  /** Props for line wrapper spans, can be function */
  lineProps?: React.HTMLProps<HTMLElement> | ((lineNumber: number) => React.HTMLProps<HTMLElement>);
  /** Custom renderer for code lines */
  renderer?: (props: RendererProps) => React.ReactNode;
  /** Custom component for pre tag (default: 'pre') */
  PreTag?: React.ComponentType<any> | string;
  /** Custom component for code tag (default: 'code') */
  CodeTag?: React.ComponentType<any> | string;
  /** Props for the code tag */
  codeTagProps?: React.HTMLProps<HTMLElement>;
  /** Additional props spread to pre tag */
  [key: string]: any;
}

import React from 'react';
import SyntaxHighlighter from 'react-syntax-highlighter';
import { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs';

// Basic usage
const BasicExample = () => {
  const code = `function hello() {
  console.log('Hello, World!');
}`;

  return (
    <SyntaxHighlighter language="javascript" style={docco}>
      {code}
    </SyntaxHighlighter>
  );
};

// With line numbers
const LineNumberExample = () => {
  const code = `def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

print(fibonacci(10))`;

  return (
    <SyntaxHighlighter 
      language="python" 
      style={docco}
      showLineNumbers={true}
      startingLineNumber={1}
    >
      {code}
    </SyntaxHighlighter>
  );
};

// Custom styling
const CustomStyleExample = () => {
  const code = `<div className="example">
  <h1>Hello World</h1>
  <p>This is a paragraph.</p>
</div>`;

  return (
    <SyntaxHighlighter 
      language="html"
      style={docco}
      customStyle={{
        padding: '20px',
        borderRadius: '8px',
        fontSize: '14px'
      }}
      codeTagProps={{
        style: {
          fontFamily: 'Menlo, Monaco, Consolas, monospace'
        }
      }}
    >
      {code}
    </SyntaxHighlighter>
  );
};

/**
 * Array of supported language identifiers
 */
const supportedLanguages: string[];

import SyntaxHighlighter from 'react-syntax-highlighter';

// Check if a language is supported
const isSupported = SyntaxHighlighter.supportedLanguages.includes('typescript');

// List all supported languages
console.log('Supported languages:', SyntaxHighlighter.supportedLanguages);

// Auto-detect language (highlight.js feature)
<SyntaxHighlighter style={docco}>
  {codeString}
</SyntaxHighlighter>

// Plain text (no highlighting)
<SyntaxHighlighter language="text" style={docco}>
  {plainTextString}
</SyntaxHighlighter>

// Function-based line number styling
const dynamicLineNumberStyle = (lineNumber) => ({
  color: lineNumber % 2 === 0 ? '#666' : '#999',
  fontWeight: lineNumber === 5 ? 'bold' : 'normal'
});

<SyntaxHighlighter 
  language="javascript"
  style={docco}
  showLineNumbers={true}
  lineNumberStyle={dynamicLineNumberStyle}
  lineNumberContainerStyle={{
    backgroundColor: '#f5f5f5',
    borderRight: '2px solid #ddd',
    paddingRight: '10px'
  }}
>
  {code}
</SyntaxHighlighter>

// Custom renderer for virtualization
const customRenderer = ({ rows, stylesheet, useInlineStyles }) => {
  return rows.map((node, i) => (
    <div key={i} className="code-line">
      {/* Custom rendering logic */}
      {createElement({
        node,
        stylesheet,
        useInlineStyles,
        key: `code-segment-${i}`
      })}
    </div>
  ));
};

<SyntaxHighlighter 
  language="javascript"
  style={docco}
  renderer={customRenderer}
  wrapLines={true}
>
  {code}
</SyntaxHighlighter>

interface RendererProps {
  /** Array of parsed code rows */
  rows: RowData[];
  /** Style object for theming */
  stylesheet: { [key: string]: React.CSSProperties };
  /** Whether to use inline styles */
  useInlineStyles: boolean;
}

interface RowData {
  type: 'element';
  tagName: string;
  properties: {
    className?: string[];
    style?: React.CSSProperties;
    key?: string;
  };
  children: Array<RowData | TextNode>;
}

interface TextNode {
  type: 'text';
  value: string;
}