Examples

This page demonstrates the Starlight Code Block Fullscreen plugin in action with various code examples and configurations. Each code block below has a fullscreen button that you can click to see the fullscreen functionality.

Basic Code Blocks

JavaScript Example

// Try clicking the fullscreen button (⛶) above!
function greetUser(name) {
  console.log(`Hello, ${name}!`);
  return `Welcome to our documentation`;
}

// Usage example
const userName = "Developer";
const message = greetUser(userName);
console.log(message);

Long Code Examples

These examples demonstrate how the fullscreen functionality is particularly useful for longer code blocks:

import pandas as pd
import numpy as np

class DataProcessor:
    def __init__(self, data_source):
        self.data_source = data_source
        self.processed_data = None

    def load_data(self):
        """Load data from the specified source."""
        try:
            self.data = pd.read_csv(self.data_source)
            print(f"Loaded {len(self.data)} records")
            return True
        except Exception as e:
            print(f"Error loading data: {e}")
            return False

    def process_data(self):
        """Process the loaded data."""
        if self.data is not None:
            # Remove duplicates
            self.processed_data = self.data.drop_duplicates()

            # Handle missing values
            self.processed_data = self.processed_data.fillna(0)

            # Normalize numerical columns
            numerical_cols = self.processed_data.select_dtypes(include=[np.number]).columns
            self.processed_data[numerical_cols] = (
                self.processed_data[numerical_cols] - self.processed_data[numerical_cols].mean()
            ) / self.processed_data[numerical_cols].std()

            return self.processed_data
        else:
            raise ValueError("No data loaded. Call load_data() first.")

# Usage
processor = DataProcessor("data.csv")
if processor.load_data():
    result = processor.process_data()
    print("Data processing completed successfully!")

Frameless Code Blocks

These code blocks don’t have titles but still get fullscreen buttons (when addToFramelessBlocks is enabled):

# Install dependencies
npm install starlight-plugin-fullscreen

# Start development server
npm start

# Build for production
npm run build

SELECT
    u.id,
    u.name,
    u.email,
    COUNT(p.id) as post_count,
    MAX(p.created_at) as last_post_date
FROM users u
LEFT JOIN posts p ON u.id = p.user_id
WHERE u.active = true
    AND u.created_at >= '2023-01-01'
GROUP BY u.id, u.name, u.email
HAVING COUNT(p.id) > 0
ORDER BY post_count DESC, last_post_date DESC
LIMIT 50;

Multiple Code Blocks

Here are several smaller code blocks to practice keyboard navigation:

console.log("First code block");

print("Second code block")

echo "Third code block"

.fourth-code-block {
  color: blue;
}

{
  "message": "Fifth code block",
  "type": "JSON"
}