Docs Kickstarter

Code Snippet

The Code Snippet component allows you to display code with syntax highlighting, line numbers, and a copy button.

Basic Usage

import { CodeSnippet } from "@/components/docs/CodeSnippet"

<CodeSnippet>
  const greeting = "Hello, World!";
  console.log(greeting);
</CodeSnippet>

With Language

Specify the programming language for proper syntax highlighting:

<CodeSnippet language="typescript">
  interface User {
    id: string;
    name: string;
    email: string;
  }

  const user: User = {
    id: "1",
    name: "John Doe",
    email: "john@example.com"
  };
</CodeSnippet>

With Line Numbers

Enable line numbers for longer code snippets:

<CodeSnippet showLineNumbers>
  function fibonacci(n: number): number {
    if (n <= 1) return n;
    return fibonacci(n - 1) + fibonacci(n - 2);
  }

  // Calculate first 10 Fibonacci numbers
  for (let i = 0; i < 10; i++) {
    console.log(fibonacci(i));
  }
</CodeSnippet>

With Highlighted Lines

Highlight specific lines to draw attention:

<CodeSnippet 
  highlightLines={[3, 4, 5]}
  showLineNumbers
>
  import { useState } from 'react';

  function Counter() {
    const [count, setCount] = useState(0);
    return <button onClick={() => setCount(count + 1)}>{count}</button>;
  }
</CodeSnippet>

With Title

Add a title to indicate the file or context:

<CodeSnippet 
  title="app/page.tsx"
  language="typescript"
>
  export default function Page() {
    return <h1>Hello, World!</h1>;
  }
</CodeSnippet>

Component Implementation

Here’s how to implement the CodeSnippet component:

// components/docs/CodeSnippet.tsx
import { useState } from 'react'
import { Check, Copy } from 'lucide-react'
import { cn } from '@/lib/utils'

interface CodeSnippetProps {
  children: string
  language?: string
  showLineNumbers?: boolean
  highlightLines?: number[]
  title?: string
  className?: string
}

export function CodeSnippet({
  children,
  language,
  showLineNumbers,
  highlightLines = [],
  title,
  className,
}: CodeSnippetProps) {
  const [copied, setCopied] = useState(false)

  const copyToClipboard = () => {
    navigator.clipboard.writeText(children)
    setCopied(true)
    setTimeout(() => setCopied(false), 2000)
  }

  return (
    <div className={cn(
      "relative rounded-lg bg-slate-950 text-slate-50",
      className
    )}>
      {title && (
        <div className="border-b border-slate-800 px-4 py-2 text-sm">
          {title}
        </div>
      )}
      <div className="relative">
        <pre className={cn(
          "overflow-x-auto p-4",
          showLineNumbers && "pl-12"
        )}>
          <code className={language}>{children}</code>
        </pre>
        <button
          onClick={copyToClipboard}
          className="absolute right-2 top-2 rounded-md p-2 text-slate-400 hover:bg-slate-800"
        >
          {copied ? (
            <Check className="h-4 w-4" />
          ) : (
            <Copy className="h-4 w-4" />
          )}
        </button>
      </div>
    </div>
  )
}

Example Usage

Here’s a live example of the CodeSnippet component:

const greeting = “Hello, World!“;

Styling

The component uses Tailwind CSS for styling. You can customize the appearance:

<CodeSnippet 
  className="dark:bg-slate-900 dark:text-slate-100"
  language="typescript"
>
  // Your code here
</CodeSnippet>

Best Practices

  1. Language Support

    • Always specify the correct language
    • Use appropriate file extensions
    • Consider fallback syntax highlighting

  2. Accessibility

    • Ensure proper color contrast
    • Make copy button accessible
    • Add appropriate ARIA labels

  3. User Experience

    • Show feedback when code is copied
    • Enable horizontal scrolling for long lines
    • Consider mobile viewing experience

  4. Performance

    • Lazy load syntax highlighting
    • Optimize for large code blocks
    • Consider code splitting

  5. Maintenance

    • Keep syntax highlighting up to date
    • Test with different code formats
    • Document supported languages