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
- Install a userscript manager (Tampermonkey, Greasemonkey, etc.)
- Install this script from the userscript
- Visit any StackExchange site with code blocks
- Hover over code blocks to see the new buttons
Usage
Basic Operations
- Hover over any code block to reveal control buttons
- Click "Fullscreen" to open code in a new dedicated tab
- Click "Copy" to copy code to clipboard
- 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
