Enhanced Code Blocks Demo

Powerful code block components with syntax highlighting, copy-to-clipboard, collapsible sections, and multi-language support for technical documentation.

Basic Enhanced Code Block

A simple code block with syntax highlighting, copy functionality, and line numbers.

User Creation Function

user-service.js

A simple function to create a new user object with validation

Complexity:Beginner

Est. Time:5 min

JAVASCRIPT

function createUser(name, email) {
  const user = {
    id: Math.random().toString(36).substr(2, 9),
    name,
    email,
    createdAt: new Date().toISOString()
  };
  
  // Validate email format
  if (!isValidEmail(email)) {
    throw new Error('Invalid email format');
  }
  
  return user;
}

Multi-Language Code Block

Show the same functionality implemented in different programming languages.

API Client Implementation

Making HTTP requests to fetch user data across different programming languages

Pattern:HTTP Client

Audience:All Developers

api-client.js

JAVASCRIPT

// REST API call using fetch
async function fetchUserData(userId) {
  try {
    const response = await fetch(`/api/users/${userId}`);
    
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    
    const userData = await response.json();
    return userData;
  } catch (error) {
    console.error('Failed to fetch user data:', error);
    throw error;
  }
}

api_client.py

PYTHON

import requests
from typing import Dict, Any

def fetch_user_data(user_id: str) -> Dict[str, Any]:
    """Fetch user data from the API."""
    try:
        response = requests.get(f"/api/users/{user_id}")
        response.raise_for_status()
        
        return response.json()
    except requests.exceptions.RequestException as error:
        print(f"Failed to fetch user data: {error}")
        raise

ApiClient.java

JAVA

import java.net.http.HttpClient;
import java.net.http.HttpRequest;
import java.net.http.HttpResponse;
import java.net.URI;
import com.fasterxml.jackson.databind.ObjectMapper;

public class ApiClient {
    private final HttpClient httpClient;
    private final ObjectMapper objectMapper;
    
    public ApiClient() {
        this.httpClient = HttpClient.newHttpClient();
        this.objectMapper = new ObjectMapper();
    }
    
    public UserData fetchUserData(String userId) throws Exception {
        HttpRequest request = HttpRequest.newBuilder()
            .uri(URI.create("/api/users/" + userId))
            .GET()
            .build();
            
        HttpResponse<String> response = httpClient.send(request, 
            HttpResponse.BodyHandlers.ofString());
            
        if (response.statusCode() != 200) {
            throw new RuntimeException("HTTP error: " + response.statusCode());
        }
        
        return objectMapper.readValue(response.body(), UserData.class);
    }
}

📁 api-client.js16 lines

JavaScript example

Collapsible Code Block

Large code examples can be collapsed to save space while still allowing easy access.

React User Management Component

UserManagement.tsx

A complete React component for managing users with state management, error handling, and user interactions

Framework:React + TypeScript

Level:Advanced

Lines:100+

TSX

// This is a longer code example that demonstrates
// the collapsible functionality of the enhanced code blocks
import React, { useState, useEffect } from 'react';
import { UserService } from '../services/UserService';
import { NotificationService } from '../services/NotificationService';
import { Logger } from '../utils/Logger';

interface User {
  id: string;
  name: string;
  email: string;
  avatar?: string;
  role: 'admin' | 'user' | 'moderator';
  createdAt: Date;
  lastLogin?: Date;
}

interface UserManagementProps {
  initialUsers?: User[];
  onUserUpdate?: (user: User) => void;
  onUserDelete?: (userId: string) => void;
}

export function UserManagement({ 
  initialUsers = [], 
  onUserUpdate, 
  onUserDelete 
}: UserManagementProps) {
  const [users, setUsers] = useState<User[]>(initialUsers);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

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

  const loadUsers = async () => {
    try {
      setLoading(true);
      setError(null);
      
      const fetchedUsers = await UserService.getAllUsers();
      setUsers(fetchedUsers);
      
      Logger.info('Users loaded successfully', { count: fetchedUsers.length });
    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : 'Unknown error';
      setError(errorMessage);
      
      Logger.error('Failed to load users', { error: errorMessage });
      NotificationService.showError('Failed to load users');
    } finally {
      setLoading(false);
    }
  };

  const handleUserUpdate = async (user: User) => {
    try {
      const updatedUser = await UserService.updateUser(user.id, user);
      
      setUsers(prevUsers => 
        prevUsers.map(u => u.id === user.id ? updatedUser : u)
      );
      
      onUserUpdate?.(updatedUser);
      NotificationService.showSuccess('User updated successfully');
      
      Logger.info('User updated', { userId: user.id });
    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : 'Update failed';
      NotificationService.showError(errorMessage);
      Logger.error('User update failed', { userId: user.id, error: errorMessage });
    }
  };

  const handleUserDelete = async (userId: string) => {
    if (!confirm('Are you sure you want to delete this user?')) {
      return;
    }

    try {
      await UserService.deleteUser(userId);
      
      setUsers(prevUsers => prevUsers.filter(u => u.id !== userId));
      
      onUserDelete?.(userId);
      NotificationService.showSuccess('User deleted successfully');
      
      Logger.info('User deleted', { userId });
    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : 'Delete failed';
      NotificationService.showError(errorMessage);
      Logger.error('User deletion failed', { userId, error: errorMessage });
    }
  };

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

  if (error) {
    return <div className="error-message">Error: {error}</div>;
  }

  return (
    <div className="user-management">
      <h2>User Management</h2>
      
      <div className="user-list">
        {users.map(user => (
          <UserCard
            key={user.id}
            user={user}
            onUpdate={handleUserUpdate}
            onDelete={handleUserDelete}
          />
        ))}
      </div>
      
      {users.length === 0 && (
        <div className="empty-state">
          No users found. Start by adding some users.
        </div>
      )}
    </div>
  );
}

Code hidden•127 lines

Minimal Code Block

Clean, minimal presentation for simple code snippets without extra header information.

BASH

npm install @ybor/developer-portal
npm start

Features

Enhanced Copy Functionality

Smart copy buttons with visual feedback and accessibility support.

Syntax Highlighting

Responsive Design

Works perfectly on desktop, tablet, and mobile devices.

Accessibility First

WCAG 2.1 AA compliant with keyboard navigation and screen reader support.

Multi-Language Support

Show the same example in multiple programming languages with tabs.

Collapsible Sections

Collapse long code examples to save space and improve readability.