Utvid kode til fullskjerm på StackExchange-siden

Veksle til fullskjerm for kodeblokker ved å holde musepekeren over

Forfatter
138 Aspen
Daglige installasjoner
0
Totale installasjoner
7
Vurderinger
0 0 0
Versjon
0.1.4
Lagd
15.02.2024
Oppdatert
18.09.2025
Size
17,3 kB
Lisens
MIT
Gjelder

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