Syntax Highlighting

interface SyntaxHighlighterProps {
  /** Programming language for syntax highlighting */
  language: SupportedLanguage;
  /** Code content to highlight */
  children: string;
  /** Show line numbers */
  showLineNumbers?: boolean;
  /** Color theme for highlighting */
  theme?: string;
  /** Additional styling options */
  [key: string]: any;
}

/**
 * Lazy-loaded syntax highlighter component with extensive language support
 * Optimized for performance with code splitting
 */
const SyntaxHighlighter: React.ComponentType<SyntaxHighlighterProps>;

/**
 * Supported programming languages for syntax highlighting
 * Includes popular languages like JavaScript, TypeScript, Python, etc.
 */
type SupportedLanguage = 
  | "javascript" 
  | "typescript" 
  | "jsx" 
  | "tsx" 
  | "css" 
  | "html" 
  | "json" 
  | "markdown" 
  | "python"
  | "java"
  | "c"
  | "cpp"
  | "csharp"
  | "php"
  | "ruby"
  | "go"
  | "rust"
  | "swift"
  | "kotlin"
  | "scala"
  | "bash"
  | "shell"
  | "sql"
  | "yaml"
  | "xml"
  | "dockerfile"
  | string; // Additional languages supported by the underlying highlighter

/**
 * Format types for syntax highlighter configuration
 */
interface SyntaxHighlighterFormatTypes {
  [key: string]: any;
}

/**
 * Props for syntax highlighter renderer components
 */
interface SyntaxHighlighterRendererProps {
  /** Parsed code rows for rendering */
  rows: any[];
  /** Styling information */
  stylesheet: any;
  /** Whether to use inline styles */
  useInlineStyles: boolean;
}

/**
 * Creates a copy-to-clipboard function for code blocks
 * Returns a function that can copy text to the system clipboard
 */
function createCopyToClipboardFunction(): (text: string) => void;

import { SyntaxHighlighter } from "@storybook/components";

// JavaScript code highlighting
<SyntaxHighlighter language="javascript">
  {`
    function greet(name) {
      return \`Hello, \${name}!\`;
    }
    
    console.log(greet("World"));
  `}
</SyntaxHighlighter>

// TypeScript code highlighting
<SyntaxHighlighter language="typescript">
  {`
    interface User {
      name: string;
      age: number;
    }
    
    const user: User = {
      name: "Alice",
      age: 30
    };
  `}
</SyntaxHighlighter>

import { SyntaxHighlighter } from "@storybook/components";

// With line numbers and custom theme
<SyntaxHighlighter 
  language="jsx"
  showLineNumbers={true}
  theme="dark"
>
  {`
    import React from 'react';
    
    function Component({ title }) {
      return (
        <div>
          <h1>{title}</h1>
          <p>Hello from React!</p>
        </div>
      );
    }
    
    export default Component;
  `}
</SyntaxHighlighter>

import { SyntaxHighlighter } from "@storybook/components";

// Python code
<SyntaxHighlighter language="python">
  {`
    def calculate_fibonacci(n):
        if n <= 1:
            return n
        return calculate_fibonacci(n-1) + calculate_fibonacci(n-2)
    
    print(calculate_fibonacci(10))
  `}
</SyntaxHighlighter>

// CSS code
<SyntaxHighlighter language="css">
  {`
    .button {
      background-color: #007bff;
      color: white;
      padding: 8px 16px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    
    .button:hover {
      background-color: #0056b3;
    }
  `}
</SyntaxHighlighter>

// JSON data
<SyntaxHighlighter language="json">
  {`
    {
      "name": "my-project",
      "version": "1.0.0",
      "dependencies": {
        "react": "^18.0.0",
        "@storybook/components": "^8.6.14"
      }
    }
  `}
</SyntaxHighlighter>

import { SyntaxHighlighter, createCopyToClipboardFunction } from "@storybook/components";
import { useState } from "react";

function CodeBlock({ code, language }) {
  const [copied, setCopied] = useState(false);
  const copyToClipboard = createCopyToClipboardFunction();

  const handleCopy = () => {
    copyToClipboard(code);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  return (
    <div style={{ position: 'relative' }}>
      <button 
        onClick={handleCopy}
        style={{ 
          position: 'absolute', 
          top: 8, 
          right: 8,
          zIndex: 1
        }}
      >
        {copied ? 'Copied!' : 'Copy'}
      </button>
      
      <SyntaxHighlighter language={language}>
        {code}
      </SyntaxHighlighter>
    </div>
  );
}

// Usage
<CodeBlock 
  language="typescript"
  code={`
    const example = "Hello World";
    console.log(example);
  `}
/>

import { SyntaxHighlighter } from "@storybook/components";

// For short code snippets
<SyntaxHighlighter 
  language="javascript" 
  style={{ display: 'inline-block', padding: '2px 4px' }}
>
  {`const x = 42;`}
</SyntaxHighlighter>