Enhanced Code Blocks Test

const greeting = "Hello, World!";
console.log(greeting);

interface User {
  id: string;
  name: string;
  email: string;
  createdAt: Date;
}

function createUser(name: string, email: string): User {
  return {
    id: crypto.randomUUID(),
    name,
    email,
    createdAt: new Date(),
  };
}

const user = createUser("Tony", "[email protected]");
console.log(user);

// A longer code example to test height capping

import { useState, useEffect, useCallback, useMemo } from 'react';

interface DataItem {
  id: number;
  title: string;
  description: string;
  status: 'pending' | 'active' | 'completed';
  priority: 'low' | 'medium' | 'high';
  createdAt: Date;
  updatedAt: Date;
  assignee: string | null;
  tags: string[];
}

interface UseDataOptions {
  initialData?: DataItem[];
  sortBy?: keyof DataItem;
  sortOrder?: 'asc' | 'desc';
  filterByStatus?: DataItem['status'] | null;
}

function useData(options: UseDataOptions = {}) {
  const {
    initialData = [],
    sortBy = 'createdAt',
    sortOrder = 'desc',
    filterByStatus = null,
  } = options;

  const [data, setData] = useState<DataItem[]>(initialData);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<Error | null>(null);

  const fetchData = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const response = await fetch('/api/data');
      if (!response.ok) {
        throw new Error('Failed to fetch data');
      }
      const json = await response.json();
      setData(json);
    } catch (err) {
      setError(err instanceof Error ? err : new Error('Unknown error'));
    } finally {
      setLoading(false);
    }
  }, []);

  const sortedData = useMemo(() => {
    return [...data].sort((a, b) => {
      const aVal = a[sortBy];
      const bVal = b[sortBy];

      if (aVal < bVal) return sortOrder === 'asc' ? -1 : 1;
      if (aVal > bVal) return sortOrder === 'asc' ? 1 : -1;
      return 0;
    });
  }, [data, sortBy, sortOrder]);

  const filteredData = useMemo(() => {
    if (!filterByStatus) return sortedData;
    return sortedData.filter(item => item.status === filterByStatus);
  }, [sortedData, filterByStatus]);

  useEffect(() => {
    fetchData();
  }, [fetchData]);

  const addItem = useCallback((item: Omit<DataItem, 'id' | 'createdAt' | 'updatedAt'>) => {
    const newItem: DataItem = {
      ...item,
      id: Date.now(),
      createdAt: new Date(),
      updatedAt: new Date(),
    };
    setData(prev => [...prev, newItem]);
  }, []);

  const updateItem = useCallback((id: number, updates: Partial<DataItem>) => {
    setData(prev => prev.map(item =>
      item.id === id
        ? { ...item, ...updates, updatedAt: new Date() }
        : item
    ));
  }, []);

  const deleteItem = useCallback((id: number) => {
    setData(prev => prev.filter(item => item.id !== id));
  }, []);

  return {
    data: filteredData,
    loading,
    error,
    refetch: fetchData,
    addItem,
    updateItem,
    deleteItem,
  };
}

export default useData;

async function fetchUserData(userId) {
  const response = await fetch(`/api/users/${userId}`);
  return response.json();
}

def calculate_fibonacci(n: int) -> list[int]:
    if n <= 0:
        return []
    elif n == 1:
        return [0]

    fib = [0, 1]
    for i in range(2, n):
        fib.append(fib[i-1] + fib[i-2])
    return fib

.code-block-wrapper {
  position: relative;
  margin: var(--space-xl) 0;
  border: 1px solid var(--color-border);
}

.code-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-bg-alt);
}

{
  "name": "tonyseets",
  "version": "1.0.0",
  "dependencies": {
    "astro": "^5.0.0",
    "react": "^19.0.0"
  }
}

# Build the project
npm run build

# Start development server
npm run dev

Just some plain text
in a code block
without syntax highlighting.