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/*
// @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) 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.