Expand Code to Fullscreen on StackExchange Site

138 Aspen
2024-02-15T12:42:47Z

Toggle fullscreen for code blocks on hover

StackExchange Code Fullscreen Viewer

A comprehensive userscript that enhances code viewing experience on StackExchange sites by adding fullscreen and copy functionality to code blocks.

Features

🔍 Fullscreen Code Viewing

Opens code blocks in a dedicated new tab for distraction-free viewing

Preserves original syntax highlighting with enhanced color scheme

Responsive design that utilizes full screen real estate

Clean, minimalist interface optimized for code reading

📋 One-Click Code Copying

Copy any code block to clipboard with a single click

Visual feedback confirms successful copy operation

Works seamlessly with both original page and fullscreen view

🎨 Syntax Highlighting

Maintains original StackExchange syntax highlighting

Enhanced highlighting in fullscreen mode using Highlight.js

Automatic language detection and preservation

GitHub-style color scheme for optimal readability

⌨️ Keyboard Shortcuts

Escape: Close fullscreen tab

Intuitive controls for efficient navigation

Installation

1. Install a userscript manager (Tampermonkey, Greasemonkey, etc.)

2. Install this script from the userscript

3. Visit any StackExchange site with code blocks

4. Hover over code blocks to see the new buttons

Usage

Basic Operations

1. Hover over any code block to reveal control buttons

2. Click "Fullscreen" to open code in a new dedicated tab

3. Click "Copy" to copy code to clipboard

4. Press Escape in fullscreen tab to close

Fullscreen View Features

Toolbar: Fixed position with Copy and Close buttons

Syntax Highlighting: Automatically applied based on detected language

Responsive Layout: Code fills available screen space

Keyboard Navigation: Escape key support for quick exit

Supported Sites

The script works across the entire StackExchange network:

Primary Sites

Stack Overflow - All programming questions and code examples

Super User - System administration and power user code

Server Fault - Server and network administration scripts

Ask Ubuntu - Ubuntu/Linux command line and configuration

Math Overflow - Mathematical code and algorithms

Additional Coverage

All StackExchange subsites (200+ communities)

Meta sites for all supported platforms

Review queues and search results

StackApps for API-related code examples

Technical Details

Implementation

Pure JavaScript - No external dependencies on main page

CDN Integration - Highlight.js loaded in fullscreen tabs

Non-intrusive - Preserves original page styling and functionality

Performance Optimized - Minimal impact on page load times

Browser Compatibility

Chrome/Chromium - Full support

Firefox - Full support

Safari - Full support

Edge - Full support

Mobile browsers - Basic functionality

Security

MIT Licensed - Open source and auditable

No data collection - Operates entirely client-side

Popup controls - Graceful handling of popup blockers

Safe execution - No external script injection on main pages

Code Structure

Main Components

// Core Functions
addStyles()           // Injects CSS for buttons and layouts
addButtons()          // Creates hover buttons for code blocks
openCodeInNewTab()    // Generates fullscreen viewing experience
copyToClipboard()     // Handles code copying functionality

CSS Architecture

Transparent wrappers - Don't interfere with original styling

Responsive design - Adapts to different screen sizes

Hover interactions - Clean, intuitive user experience

Fullscreen optimization - Maximum readability in dedicated view

Event Handling

Load events - Initializes after page content loads

Hover states - Shows/hides control buttons

Click handlers - Manages fullscreen and copy operations

Keyboard events - Escape key support in fullscreen

Customization

Styling Options

The script can be customized by modifying CSS variables:

/* Button appearance */
.button {
    background-color: #eee;  /* Button background */
    font-size: 12px;         /* Button text size */
    padding: 4px 8px;        /* Button spacing */
}

/* Fullscreen styling */
.toolbar button {
    background: #007acc;     /* Toolbar button color */
    color: white;            /* Toolbar text color */
}

Language Support

Syntax highlighting supports 190+ programming languages including:

Web: JavaScript, TypeScript, HTML, CSS, SCSS

Backend: Python, Java, C#, PHP, Ruby, Go, Rust

Systems: C, C++, Assembly, Shell/Bash

Data: SQL, JSON, XML, YAML, CSV

Functional: Haskell, Lisp, Erlang, F#

Mobile: Swift, Kotlin, Dart

And many more...

Troubleshooting

Common Issues

Buttons not appearing

Ensure userscript manager is enabled

Check if site is in supported match patterns

Refresh page after installation

Popup blocked in fullscreen

Allow popups for StackExchange domains

Check browser popup blocker settings

Try clicking directly on button (not during hover transition)

Syntax highlighting not working

Check internet connection (CDN dependency in fullscreen)

Verify code block has proper language class

Try refreshing the fullscreen tab

Copy not working

Ensure HTTPS connection (clipboard API requirement)

Check browser clipboard permissions

Try using Ctrl+C as fallback

Performance Optimization

Script loads asynchronously to avoid blocking page render

Minimal DOM modifications preserve original functionality

Event delegation reduces memory footprint

CSS transitions optimized for smooth interactions

License

MIT License - Free for personal and commercial use.

Support

For issues, feature requests, or contributions:

GitHub Issues: Report bugs and request features

StackExchange Meta: Discuss improvements with community

UserScript Comments: Share feedback and tips