☰

Expand Code to Fullscreen on StackExchange Site

Toggle fullscreen for code blocks on hover

目前為 2024-02-15 提交的版本，檢視 最新版本。

// ==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/*
// @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);
    });
})();