// JavaScript 函数示例
function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

// 使用 async/await
async function fetchData(url) {
  try {
    const response = await fetch(url);
    const data = await response.json();
    return data;
  } catch (error) {
    console.error("Error fetching data:", error);
    throw error;
  }
}

// ES6 箭头函数和解构
const users = [
  { name: "Alice", age: 25 },
  { name: "Bob", age: 30 },
];

const getAdultUsers = (users) => {
  return users
    .filter(({ age }) => age >= 18)
    .map(({ name, age }) => ({ name, age }));
};

import React, { useState, useEffect } from "react";

const UserProfile = ({ userId }) => {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchUser = async () => {
      try {
        const response = await fetch(`/api/users/${userId}`);
        const userData = await response.json();
        setUser(userData);
      } catch (error) {
        console.error("Failed to fetch user:", error);
      } finally {
        setLoading(false);
      }
    };

    fetchUser();
  }, [userId]);

  if (loading) {
    return <div className="spinner">Loading...</div>;
  }

  return (
    <div className="user-profile">
      <h2>{user?.name}</h2>
      <p>Email: {user?.email}</p>
      <p>Age: {user?.age}</p>
    </div>
  );
};

export default UserProfile;

# Python 类和装饰器示例
from functools import wraps
import time

def timer(func):
    @wraps(func)
    def wrapper(*args, **kwargs):
        start_time = time.time()
        result = func(*args, **kwargs)
        end_time = time.time()
        print(f"{func.__name__} took {end_time - start_time:.4f} seconds")
        return result
    return wrapper

class DataProcessor:
    def __init__(self, data):
        self.data = data
        self.processed = False

    @timer
    def process_data(self):
        """处理数据的方法"""
        processed_data = []
        for item in self.data:
            if isinstance(item, (int, float)):
                processed_data.append(item * 2)
            elif isinstance(item, str):
                processed_data.append(item.upper())

        self.data = processed_data
        self.processed = True
        return self.data

# 使用示例
processor = DataProcessor([1, 2, 'hello', 3.14, 'world'])
result = processor.process_data()
print(f"Processed data: {result}")

/* 现代 CSS 样式示例 */
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  padding: 2rem;
  color: white;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* CSS Grid 和 Flexbox 结合 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
    padding: 1rem;
  }

  .header {
    flex-direction: column;
    gap: 1rem;
  }
}

-- 复杂的 SQL 查询示例
WITH user_stats AS (
  SELECT
    u.id,
    u.name,
    u.email,
    COUNT(o.id) as order_count,
    SUM(o.total_amount) as total_spent,
    AVG(o.total_amount) as avg_order_value
  FROM users u
  LEFT JOIN orders o ON u.id = o.user_id
  WHERE u.created_at >= '2023-01-01'
  GROUP BY u.id, u.name, u.email
),
top_customers AS (
  SELECT *,
    RANK() OVER (ORDER BY total_spent DESC) as spending_rank
  FROM user_stats
  WHERE order_count > 0
)
SELECT
  name,
  email,
  order_count,
  total_spent,
  avg_order_value,
  spending_rank,
  CASE
    WHEN spending_rank <= 10 THEN 'VIP'
    WHEN spending_rank <= 50 THEN 'Premium'
    ELSE 'Regular'
  END as customer_tier
FROM top_customers
WHERE spending_rank <= 100
ORDER BY spending_rank;

{
  "name": "代码高亮测试",
  "version": "1.0.0",
  "description": "测试各种编程语言的代码高亮效果",
  "author": {
    "name": "博主",
    "email": "blogger@example.com"
  },
  "languages": [
    {
      "name": "JavaScript",
      "extension": ".js",
      "features": ["动态类型", "函数式编程", "异步编程"]
    },
    {
      "name": "Python",
      "extension": ".py",
      "features": ["简洁语法", "丰富库", "数据科学"]
    },
    {
      "name": "CSS",
      "extension": ".css",
      "features": ["样式设计", "响应式布局", "动画效果"]
    }
  ],
  "config": {
    "highlightTheme": "github-dark",
    "showLineNumbers": true,
    "enableCopyButton": false
  }
}