// ==UserScript== // @name Expand Code to Fullscreen on StackExchange Site // @namespace http://tampermonkey.net/ // @author aspen138 // @version 0.1.2 // @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; } .button { position: absolute; top: 0; z-index: 10; padding: 4px 8px; background-color: #eee; border: none; cursor: pointer; border-radius: 4px; font-size: 12px; display: none; } .fullscreen-btn { right: 0; } .copy-btn { right: 80px; /* Adjust based on the size of the fullscreen button */ } .button:hover { background-color: #ddd; } .code-wrapper:hover .button { display: block; } .code-wrapper.fullscreen { background: white; color: black; width: 100%; height: 100%; overflow: auto; margin: 0; padding: 20px; } .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'); codeWrapper.querySelector('code').classList.forEach(cls => { codeWrapper.classList.add(cls); }); }); } else if (document.fullscreenElement && document.exitFullscreen) { document.exitFullscreen().then(() => { codeWrapper.classList.remove('fullscreen'); codeWrapper.querySelector('code').classList.forEach(cls => { codeWrapper.classList.remove(cls); }); }); } } // Function to copy code to clipboard function copyToClipboard(codeWrapper) { const code = codeWrapper.querySelector('code').innerText; navigator.clipboard.writeText(code).then(() => { console.log('Code copied to clipboard!'); // codeWrapper.textContent="Copied"; // setTimeout( ()=>copyBtn.textContent="Copy", 1*1000); }).catch(err => { console.error('Error copying code to clipboard: ', err); }); } // Function to create fullscreen and copy buttons for each code block function addButtons() { document.querySelectorAll('pre code').forEach((code) => { let wrapper = code.closest('.code-wrapper'); if (!wrapper) { wrapper = document.createElement('div'); wrapper.classList.add('code-wrapper'); code.classList.forEach(cls => { if (cls !== 'hljs') { wrapper.classList.add(cls); } }); code.parentNode.insertBefore(wrapper, code); wrapper.appendChild(code); } if (!wrapper.querySelector('.fullscreen-btn')) { const fullscreenBtn = document.createElement('button'); fullscreenBtn.textContent = 'Fullscreen'; fullscreenBtn.classList.add('fullscreen-btn', 'button'); fullscreenBtn.addEventListener('click', () => toggleFullScreen(wrapper)); wrapper.appendChild(fullscreenBtn); } // Add copy button if (!wrapper.querySelector('.copy-btn')) { const copyBtn = document.createElement('button'); copyBtn.textContent = 'Copy'; copyBtn.classList.add('copy-btn', 'button'); copyBtn.addEventListener('click', () => copyToClipboard(wrapper)); wrapper.appendChild(copyBtn); } }); } // Wait for the DOM to be fully loaded window.addEventListener('load', function() { addStyles(); setTimeout(addButtons, 0); }); })();