// ==UserScript== // @name Expand Code to Fullscreen on StackExchange Site // @namespace http://tampermonkey.net/ // @author aspen138 // @version 0.1.1 // @description Toggle fullscreen for code blocks on hover // @match *://*.stackexchange.com/* // @match *://*.stackoverflow.com/questions/* // @match *://superuser.com/questions/* // @match *://meta.superuser.com/questions/* // @match *://serverfault.com/questions/* // @match *://meta.serverfault.com/questions/* // @match *://askubuntu.com/questions/* // @match *://meta.askubuntu.com/questions/* // @match *://mathoverflow.net/questions/* // @match *://meta.mathoverflow.net/questions/* // @match *://*.stackexchange.com/questions/* // @match *://answers.onstartups.com/questions/* // @match *://meta.answers.onstartups.com/questions/* // @match *://stackapps.com/questions/* // @match *://*.stackoverflow.com/review/* // @match *://superuser.com/review/* // @match *://meta.superuser.com/review/* // @match *://serverfault.com/review/* // @match *://meta.serverfault.com/review/* // @match *://askubuntu.com/review/* // @match *://meta.askubuntu.com/review/* // @match *://mathoverflow.net/review/* // @match *://meta.mathoverflow.net/review/* // @match *://*.stackexchange.com/review/* // @match *://answers.onstartups.com/review/* // @match *://meta.answers.onstartups.com/review/* // @match *://stackapps.com/review/* // @match *://*.stackoverflow.com/search* // @match *://superuser.com/search* // @match *://meta.superuser.com/search* // @match *://serverfault.com/search* // @match *://meta.serverfault.com/search* // @match *://askubuntu.com/search* // @match *://meta.askubuntu.com/search* // @match *://mathoverflow.net/search* // @match *://meta.mathoverflow.net/search* // @match *://*.stackexchange.com/search* // @match *://answers.onstartups.com/search* // @match *://meta.answers.onstartups.com/search* // @match *://stackapps.com/search* // @grant none // @license MIT // @downloadURL none // ==/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 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 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); }); })();