Expand Code to Fullscreen on StackExchange Site

Question

Description

Script practice.

• Toggle Fullscreen on Hover: When users hover over a code block, a 'Fullscreen' button appears. Clicking this button will expand the code block to fill the entire screen, facilitating easier reading and analysis of the code without distractions from other page content.

• Clean Exit from Fullscreen: When the user exits fullscreen mode, the code block returns to its original state without any leftover styling or class changes, ensuring the page remains as it was before the script's interaction.

Code

// ==UserScript==
// @name          Expand Code to Fullscreen on StackExchange Site
// @namespace    http://tampermonkey.net/
// @author      aspen138
// @version      0.1
// @description  Toggle fullscreen for code blocks on hover
// @match      *://*.stackexchange.com/*
// @match          *://stackapps.com/questions/*
// @match          *://stackapps.com/review/*
// @match          *://stackapps.com/search*
// ...
// ...
// @grant        none
// @license    MIT
// ==/UserScript==


(function() {
    'use strict';

    // Function to inject styles
    function addStyles() {
        const style = document.createElement('style');
        style.type = 'text/css';
        style.innerHTML = `
            .code-wrapper {
                position: relative;
            }
            .fullscreen-btn {
                position: absolute;
                top: 0;
                right: 0;
                z-index: 10;
                padding: 4px 8px;
                background-color: #eee;
                border: none;
                cursor: pointer;
                border-radius: 4px;
                font-size: 12px;
                display: none;
            }
            .fullscreen-btn:hover {
                background-color: #ddd;
            }
            .code-wrapper:hover .fullscreen-btn {
                display: block;
            }
            /* Fullscreen specific styles */
            .code-wrapper.fullscreen {
                background: white; /* Change this to the desired background color */
                color: black; /* And this to the desired text color */
                width: 100%;
                height: 100%;
                overflow: auto; /* This allows scrolling */
                margin: 0;
                padding: 20px; /* Or however much padding you want */
            }
            /* Ensure syntax highlighting styles have enough specificity */
            .code-wrapper.fullscreen .hljs {
                display: block;
                overflow-x: auto;
                padding: 0.5em;
                color: inherit;
                background: inherit;
            }
        `;
        document.head.appendChild(style);
    }

    // Function to toggle fullscreen for the specific code block
    function toggleFullScreen(codeWrapper) {
        if (!document.fullscreenElement && codeWrapper.requestFullscreen) {
            codeWrapper.requestFullscreen().then(() => {
                codeWrapper.classList.add('fullscreen');
                // Copy all classes from <code> to the wrapper
                codeWrapper.querySelector('code').classList.forEach(cls => {
                    codeWrapper.classList.add(cls);
                });
            });
        } else if (document.fullscreenElement && document.exitFullscreen) {
            document.exitFullscreen().then(() => {
                codeWrapper.classList.remove('fullscreen');
                // Remove the copied classes from the wrapper
                codeWrapper.querySelector('code').classList.forEach(cls => {
                    codeWrapper.classList.remove(cls);
                });
            });
        }
    }

    // Function to create a fullscreen button for each code block
    function addFullscreenButtons() {
        document.querySelectorAll('pre code').forEach((code) => {
            // Check if the code block is already wrapped with the code-wrapper
            let wrapper = code.closest('.code-wrapper');
            if (!wrapper) {
                wrapper = document.createElement('div');
                wrapper.classList.add('code-wrapper');
                // Move the classes from <code> to the wrapper
                code.classList.forEach(cls => {
                    if (cls !== 'hljs') { // Avoid moving the 'hljs' class
                        wrapper.classList.add(cls);
                    }
                });
                code.parentNode.insertBefore(wrapper, code);
                wrapper.appendChild(code);
            }

            // Create and append the fullscreen button if not already there
            if (!wrapper.querySelector('.fullscreen-btn')) {
                const btn = document.createElement('button');
                btn.textContent = 'Fullscreen';
                btn.classList.add('fullscreen-btn');
                btn.addEventListener('click', () => toggleFullScreen(wrapper));
                wrapper.appendChild(btn);
            }
        });
    }

    // Wait for the DOM to be fully loaded
    window.addEventListener('load', function() {
        addStyles();
        // Call addFullscreenButtons with a delay to allow syntax highlighting to process
        setTimeout(addFullscreenButtons, 0);
    });
})();

Installation

GreasyFork backup, Click to install

Bugs, requests

Now(2024-02-15 UTC+8) the script can not deal with syntax highlight well, any help would be appreciated.

You can post bugs or requests in the greasyfork script feedback or answer this question itself.