Syntax Highlighting Test

// Function with modern JavaScript features
const processData = async (items) => {
  const results = await Promise.all(
    items.map(async (item) => {
      const processed = await transform(item);
      return { ...processed, timestamp: Date.now() };
    })
  );
 
  return results.filter(Boolean);
};
 
// Using the function
processData(['apple', 'banana', 'orange'])
  .then(console.log)
  .catch(console.error);

interface User {
  id: string; // This line is highlighted
  name: string;
  email: string;
  roles: Role[]; // These lines
  createdAt: Date; // are also
  updatedAt: Date; // highlighted
}
 
type Role = 'admin' | 'user' | 'guest';
 
class UserService {
  async findById(id: string): Promise<User | null> {
    return await db.users.findUnique({ where: { id } });
  }
}

import asyncio
from typing import List, Optional
 
class DataProcessor:
    def __init__(self, batch_size: int = 100):
        self.batch_size = batch_size
        self.processed_count = 0
 
    async def process_batch(self, items: List[str]) -> List[dict]:
        """Process a batch of items asynchronously"""
        tasks = [self._process_item(item) for item in items]
        results = await asyncio.gather(*tasks)
        self.processed_count += len(results)
        return results
 
    async def _process_item(self, item: str) -> dict:
        # Simulate processing
        await asyncio.sleep(0.1)
        return {"item": item, "processed": True}

import { useState, useEffect } from 'react';
import { Card } from '@/components/ui/card';
 
export function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
 
  useEffect(() => {
    fetchUser(userId)
      .then(setUser)
      .finally(() => setLoading(false));
  }, [userId]);
 
  if (loading) return <div>Loading...</div>;
  if (!user) return <div>User not found</div>;
 
  return (
    <Card className="p-6">
      <h2 className="text-2xl font-bold">{user.name}</h2>
      <p className="text-gray-600">{user.email}</p>
    </Card>
  );
}

-- Get top customers by revenue
WITH customer_revenue AS (
  SELECT
    c.customer_id,
    c.name,
    c.email,
    SUM(o.total_amount) as total_revenue,
    COUNT(DISTINCT o.order_id) as order_count
  FROM customers c
  INNER JOIN orders o ON c.customer_id = o.customer_id
  WHERE o.status = 'completed'
    AND o.created_at >= DATEADD(month, -12, GETDATE())
  GROUP BY c.customer_id, c.name, c.email
)
SELECT
  customer_id,
  name,
  email,
  total_revenue,
  order_count,
  RANK() OVER (ORDER BY total_revenue DESC) as revenue_rank
FROM customer_revenue
WHERE total_revenue > 1000
ORDER BY total_revenue DESC
LIMIT 100;

#!/bin/bash
 
# Deploy script with error handling
set -euo pipefail
 
# Configuration
APP_NAME="my-app"
DEPLOY_ENV="${1:-production}"
TIMESTAMP=$(date +%Y%m%d_%H%M%S)
 
echo "🚀 Deploying $APP_NAME to $DEPLOY_ENV..."
 
# Build the application
echo "📦 Building application..."
npm run build
 
# Run tests
echo "🧪 Running tests..."
npm test
 
# Deploy based on environment
if [ "$DEPLOY_ENV" = "production" ]; then
    echo "🌍 Deploying to production..."
    npm run deploy:prod
else
    echo "🏗️  Deploying to staging..."
    npm run deploy:staging
fi
 
echo "✅ Deployment complete!"

{
  // Application configuration
  "name": "my-awesome-app",
  "version": "1.0.0",
  "features": {
    "authentication": true,
    "darkMode": true,
    "analytics": {
      "enabled": true,
      "provider": "plausible", // or "google", "mixpanel"
      "config": {
        "domain": "example.com"
      }
    }
  },
  // Development settings
  "development": {
    "port": 3000,
    "hmr": true,
    "sourceMaps": true
  }
}

/* Modern CSS with custom properties */
:root {
  --primary-color: #3b82f6;
  --secondary-color: #8b5cf6;
  --background: #ffffff;
  --foreground: #0a0a0a;
  --radius: 0.5rem;
}
 
.card {
  background: var(--background);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
  padding: 2rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
 
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.15);
}
 
@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ffffff;
  }
}

package main
 
import (
    "context"
    "encoding/json"
    "fmt"
    "net/http"
    "time"
)
 
type User struct {
    ID        string    `json:"id"`
    Name      string    `json:"name"`
    Email     string    `json:"email"`
    CreatedAt time.Time `json:"created_at"`
}
 
func main() {
    router := http.NewServeMux()
 
    router.HandleFunc("/api/users/{id}", func(w http.ResponseWriter, r *http.Request) {
        userID := r.PathValue("id")
 
        user := User{
            ID:        userID,
            Name:      "John Doe",
            Email:     "john@example.com",
            CreatedAt: time.Now(),
        }
 
        w.Header().Set("Content-Type", "application/json")
        json.NewEncoder(w).Encode(user)
    })
 
    fmt.Println("Server starting on :8080")
    http.ListenAndServe(":8080", router)
}