Expand Code to Fullscreen on StackExchange Site

Toggle fullscreen for code blocks on hover

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

  1. // ==UserScript==
  2. // @name Expand Code to Fullscreen on StackExchange Site
  3. // @namespace http://tampermonkey.net/
  4. // @author aspen138
  5. // @version 0.1
  6. // @description Toggle fullscreen for code blocks on hover
  7. // @match *://*.stackexchange.com/*
  8. // @grant none
  9. // @license MIT
  10. // ==/UserScript==
  11.  
  12.  
  13. (function() {
  14. 'use strict';
  15.  
  16. // Function to inject styles
  17. function addStyles() {
  18. const style = document.createElement('style');
  19. style.type = 'text/css';
  20. style.innerHTML = `
  21. .code-wrapper {
  22. position: relative;
  23. }
  24. .fullscreen-btn {
  25. position: absolute;
  26. top: 0;
  27. right: 0;
  28. z-index: 10;
  29. padding: 4px 8px;
  30. background-color: #eee;
  31. border: none;
  32. cursor: pointer;
  33. border-radius: 4px;
  34. font-size: 12px;
  35. display: none;
  36. }
  37. .fullscreen-btn:hover {
  38. background-color: #ddd;
  39. }
  40. .code-wrapper:hover .fullscreen-btn {
  41. display: block;
  42. }
  43. /* Fullscreen specific styles */
  44. .code-wrapper.fullscreen {
  45. background: white; /* Change this to the desired background color */
  46. color: black; /* And this to the desired text color */
  47. width: 100%;
  48. height: 100%;
  49. overflow: auto; /* This allows scrolling */
  50. margin: 0;
  51. padding: 20px; /* Or however much padding you want */
  52. }
  53. /* Ensure syntax highlighting styles have enough specificity */
  54. .code-wrapper.fullscreen .hljs {
  55. display: block;
  56. overflow-x: auto;
  57. padding: 0.5em;
  58. color: inherit;
  59. background: inherit;
  60. }
  61. `;
  62. document.head.appendChild(style);
  63. }
  64.  
  65. // Function to toggle fullscreen for the specific code block
  66. function toggleFullScreen(codeWrapper) {
  67. if (!document.fullscreenElement && codeWrapper.requestFullscreen) {
  68. codeWrapper.requestFullscreen().then(() => {
  69. codeWrapper.classList.add('fullscreen');
  70. // Copy all classes from <code> to the wrapper
  71. codeWrapper.querySelector('code').classList.forEach(cls => {
  72. codeWrapper.classList.add(cls);
  73. });
  74. });
  75. } else if (document.fullscreenElement && document.exitFullscreen) {
  76. document.exitFullscreen().then(() => {
  77. codeWrapper.classList.remove('fullscreen');
  78. // Remove the copied classes from the wrapper
  79. codeWrapper.querySelector('code').classList.forEach(cls => {
  80. codeWrapper.classList.remove(cls);
  81. });
  82. });
  83. }
  84. }
  85.  
  86. // Function to create a fullscreen button for each code block
  87. function addFullscreenButtons() {
  88. document.querySelectorAll('pre code').forEach((code) => {
  89. // Check if the code block is already wrapped with the code-wrapper
  90. let wrapper = code.closest('.code-wrapper');
  91. if (!wrapper) {
  92. wrapper = document.createElement('div');
  93. wrapper.classList.add('code-wrapper');
  94. // Move the classes from <code> to the wrapper
  95. code.classList.forEach(cls => {
  96. if (cls !== 'hljs') { // Avoid moving the 'hljs' class
  97. wrapper.classList.add(cls);
  98. }
  99. });
  100. code.parentNode.insertBefore(wrapper, code);
  101. wrapper.appendChild(code);
  102. }
  103.  
  104. // Create and append the fullscreen button if not already there
  105. if (!wrapper.querySelector('.fullscreen-btn')) {
  106. const btn = document.createElement('button');
  107. btn.textContent = 'Fullscreen';
  108. btn.classList.add('fullscreen-btn');
  109. btn.addEventListener('click', () => toggleFullScreen(wrapper));
  110. wrapper.appendChild(btn);
  111. }
  112. });
  113. }
  114.  
  115. // Wait for the DOM to be fully loaded
  116. window.addEventListener('load', function() {
  117. addStyles();
  118. // Call addFullscreenButtons with a delay to allow syntax highlighting to process
  119. setTimeout(addFullscreenButtons, 0);
  120. });
  121. })();