☰

在 StackExchange 网站上将代码扩展到全屏

悬停时切换代码块的全屏模式

  1. // ==UserScript==
  2. // @name          Expand Code to Fullscreen on StackExchange Site
  3. // @description  Toggle fullscreen for code blocks on hover
  4. // @name:ar      توسيع الكود إلى الشاشة الكاملة على موقع StackExchange
  5. // @description:ar تبديل الشاشة الكاملة لكتل الكود عند التمرير فوقها
  6. // @name:bg      Разширяване на кода до цял екран на сайта StackExchange
  7. // @description:bg Превключване на цял екран за кодови блокове при задържане на курсора
  8. // @name:cs      Rozbalit kód na celou obrazovku na webu StackExchange
  9. // @description:cs Přepínání na celou obrazovku pro bloky kódu při najetí myší
  10. // @name:da      Udrul kode til fuld skærm på StackExchange-siden
  11. // @description:da Skift til fuld skærm for kodeblokke ved at holde musen over
  12. // @name:de      Code auf Vollbild erweitern auf der StackExchange-Seite
  13. // @description:de Vollbild für Code-Blöcke beim Überfahren mit der Maus umschalten
  14. // @name:el      Επέκταση κώδικα σε πλήρη οθόνη στον ιστότοπο StackExchange
  15. // @description:el Εναλλαγή πλήρους οθόνης για μπλοκ κώδικα κατά την αιώρηση
  16. // @name:en      Expand Code to Fullscreen on StackExchange Site
  17. // @description:en Toggle fullscreen for code blocks on hover
  18. // @name:eo      Etendi Kodon al Plenekrano en StackExchange Retejo
  19. // @description:eo Ŝalti plenekranon por kodblokoj dum ŝvebado
  20. // @name:es      Expandir código a pantalla completa en el sitio StackExchange
  21. // @description:es Alternar pantalla completa para bloques de código al pasar el cursor
  22. // @name:fi      Laajenna koodi koko näytölle StackExchange-sivustolla
  23. // @description:fi Vaihda koko näyttö koodilohkoille hiiren ollessa päällä
  24. // @name:fr      Agrandir le code en plein écran sur le site StackExchange
  25. // @description:fr Basculer en plein écran pour les blocs de code au survol
  26. // @name:fr-CA   Agrandir le code en plein écran sur le site StackExchange
  27. // @description:fr-CA Basculer en plein écran pour les blocs de code au survol
  28. // @name:he      הרחב קוד למסך מלא באתר StackExchange
  29. // @description:he החלף למסך מלא עבור בלוקים של קוד בעת ריחוף
  30. // @name:hr      Proširi kod na cijeli zaslon na stranici StackExchange
  31. // @description:hr Prebacivanje na cijeli zaslon za kodne blokove pri prelasku mišem
  32. // @name:hu      Kód kibontása teljes képernyőre a StackExchange oldalon
  33. // @description:hu Teljes képernyőre váltás kódblokkokhoz az egér fölé vitelekor
  34. // @name:id      Perluas Kode ke Layar Penuh di Situs StackExchange
  35. // @description:id Alihkan layar penuh untuk blok kode saat mengarahkan kursor
  36. // @name:it      Espandi il codice a schermo intero sul sito StackExchange
  37. // @description:it Attiva/disattiva lo schermo intero per i blocchi di codice al passaggio del mouse
  38. // @name:ja      StackExchangeサイトでコードをフルスクリーンに展開
  39. // @description:ja ホバー時にコードブロックをフルスクリーンに切り替えます
  40. // @name:ka      გააფართოვეთ კოდი სრულ ეკრანზე StackExchange საიტზე
  41. // @description:ka გადართეთ სრულ ეკრანზე კოდის ბლოკებისთვის მაუსის გადატარებისას
  42. // @name:ko      StackExchange 사이트에서 코드를 전체 화면으로 확장
  43. // @description:ko 마우스를 올리면 코드 블록을 전체 화면으로 전환
  44. // @name:nb      Utvid kode til fullskjerm på StackExchange-siden
  45. // @description:nb Veksle til fullskjerm for kodeblokker ved å holde musepekeren over
  46. // @name:nl      Code uitbreiden naar volledig scherm op StackExchange-site
  47. // @description:nl Schakel naar volledig scherm voor codeblokken bij zweven
  48. // @name:pl      Rozwiń kod na pełny ekran na stronie StackExchange
  49. // @description:pl Przełącz na pełny ekran dla bloków kodu przy najechaniu kursorem
  50. // @name:pt-BR   Expandir código para tela cheia no site StackExchange
  51. // @description:pt-BR Alternar tela cheia para blocos de código ao passar o mouse
  52. // @name:ro      Extinde codul la ecran complet pe site-ul StackExchange
  53. // @description:ro Comută pe ecran complet pentru blocurile de cod la trecerea cursorului
  54. // @name:ru      Развернуть код на полный экран на сайте StackExchange
  55. // @description:ru Переключить полноэкранный режим для блоков кода при наведении
  56. // @name:sk      Rozbaliť kód na celú obrazovku na stránke StackExchange
  57. // @description:sk Prepínať na celú obrazovku pre bloky kódu pri prechode myšou
  58. // @name:sr      Прошири код на цео екран на сајту StackExchange
  59. // @description:sr Пребаци на цео екран за блокове кода при преласку мишем
  60. // @name:sv      Utöka kod till helskärm på StackExchange-sidan
  61. // @description:sv Växla till helskärm för kodblock vid hovring
  62. // @name:th      ขยายโค้ดเป็นเต็มหน้าจอบนเว็บไซต์ StackExchange
  63. // @description:th สลับไปยังเต็มหน้าจอสำหรับบล็อกโค้ดเมื่อวางเมาส์ไว้เหนือ
  64. // @name:tr      StackExchange Sitesinde Kodu Tam Ekran Yap
  65. // @description:tr Üzerine gelindiğinde kod blokları için tam ekranı aç/kapat
  66. // @name:ug      StackExchange تور بېتىدە كودنى تولۇق ئېكرانغا كېڭەيتىش
  67. // @description:ug چاشقاننى يۆتكەپ ئۆتكەندە كود بۆلەكلىرى ئۈچۈن تولۇق ئېكراننى ئالماشتۇرۇش
  68. // @name:uk      Розгорнути код на весь екран на сайті StackExchange
  69. // @description:uk Перемикати повноекранний режим для блоків коду при наведенні
  70. // @name:vi      Mở rộng mã sang toàn màn hình trên trang StackExchange
  71. // @description:vi Chuyển đổi toàn màn hình cho các khối mã khi di chuột qua
  72. // @name:zh      在 StackExchange 网站上将代码扩展到全屏
  73. // @description:zh 悬停时切换代码块的全屏模式
  74. // @name:zh-CN   在 StackExchange 网站上将代码扩展到全屏
  75. // @description:zh-CN 悬停时切换代码块的全屏模式
  76. // @name:zh-HK   喺 StackExchange 網站上將程式碼擴展到全螢幕
  77. // @description:zh-HK 喺滑鼠懸停時切換程式碼區塊嘅全螢幕模式
  78. // @name:zh-SG   在 StackExchange 网站上将代码扩展到全屏
  79. // @description:zh-SG 悬停时切换代码块的全屏模式
  80. // @name:zh-TW   在 StackExchange 網站上將程式碼擴展至全螢幕
  81. // @description:zh-TW 懸停時切換程式碼區塊的全螢幕模式
  82. // @namespace    http://tampermonkey.net/
  83. // @author      aspen138
  84. // @version      0.1.3.1
  85. // @match      *://*.stackexchange.com/*
  86. // @match          *://*.stackoverflow.com/questions/*
  87. // @match          *://superuser.com/questions/*
  88. // @match          *://meta.superuser.com/questions/*
  89. // @match          *://serverfault.com/questions/*
  90. // @match          *://meta.serverfault.com/questions/*
  91. // @match          *://askubuntu.com/questions/*
  92. // @match          *://meta.askubuntu.com/questions/*
  93. // @match          *://mathoverflow.net/questions/*
  94. // @match          *://meta.mathoverflow.net/questions/*
  95. // @match          *://*.stackexchange.com/questions/*
  96. // @match          *://answers.onstartups.com/questions/*
  97. // @match          *://meta.answers.onstartups.com/questions/*
  98. // @match          *://stackapps.com/questions/*
  99. // @match          *://*.stackoverflow.com/review/*
  100. // @match          *://superuser.com/review/*
  101. // @match          *://meta.superuser.com/review/*
  102. // @match          *://serverfault.com/review/*
  103. // @match          *://meta.serverfault.com/review/*
  104. // @match          *://askubuntu.com/review/*
  105. // @match          *://meta.askubuntu.com/review/*
  106. // @match          *://mathoverflow.net/review/*
  107. // @match          *://meta.mathoverflow.net/review/*
  108. // @match          *://*.stackexchange.com/review/*
  109. // @match          *://answers.onstartups.com/review/*
  110. // @match          *://meta.answers.onstartups.com/review/*
  111. // @match          *://stackapps.com/review/*
  112. // @match          *://*.stackoverflow.com/search*
  113. // @match          *://superuser.com/search*
  114. // @match          *://meta.superuser.com/search*
  115. // @match          *://serverfault.com/search*
  116. // @match          *://meta.serverfault.com/search*
  117. // @match          *://askubuntu.com/search*
  118. // @match          *://meta.askubuntu.com/search*
  119. // @match          *://mathoverflow.net/search*
  120. // @match          *://meta.mathoverflow.net/search*
  121. // @match          *://*.stackexchange.com/search*
  122. // @match          *://answers.onstartups.com/search*
  123. // @match          *://meta.answers.onstartups.com/search*
  124. // @match          *://stackapps.com/search*
  125. // @grant        none
  126. // @license    MIT
  127. // ==/UserScript==
  128.  
  129.  
  130.  
  131. function Toast(msg, duration) {
  132.     let p1 = new Promise((resolve,reject)=>{
  133.         duration = isNaN(duration) ? 3000 : duration;
  134.         var m = document.createElement('div');
  135.         m.innerHTML = msg;
  136.         m.style.cssText = "font-family:siyuan;max-width:60%;min-width: 150px;padding:0 14px;height: 40px;color: rgb(255, 255, 255);line-height: 40px;text-align: center;border-radius: 4px;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 999999;background: rgba(0, 0, 0,.7);font-size: 16px;";
  137.         document.body.appendChild(m);
  138.         setTimeout(function() {
  139.             var d = 0.5;
  140.             m.style.webkitTransition = '-webkit-transform ' + d + 's ease-in, opacity ' + d + 's ease-in';
  141.             m.style.opacity = '0';
  142.             setTimeout(function() {
  143.                 document.body.removeChild(m)
  144.             }, d * 1000);
  145.         }, duration);
  146.     });
  147. }
  148.  
  149.  
  150.  
  151. (function() {
  152.     'use strict';
  153.  
  154.     // Function to inject styles
  155.     function addStyles() {
  156.         const style = document.createElement('style');
  157.         style.type = 'text/css';
  158.         style.innerHTML = `
  159.             .code-wrapper {
  160.                 position: relative;
  161.             }
  162.             .button {
  163.                 position: absolute;
  164.                 top: 0;
  165.                 z-index: 10;
  166.                 padding: 4px 8px;
  167.                 background-color: #eee;
  168.                 border: none;
  169.                 cursor: pointer;
  170.                 border-radius: 4px;
  171.                 font-size: 12px;
  172.                 display: none;
  173.             }
  174.             .fullscreen-btn {
  175.                 right: 0;
  176.             }
  177.             .copy-btn {
  178.                 right: 80px; /* Adjust based on the size of the fullscreen button */
  179.             }
  180.             .button:hover {
  181.                 background-color: #ddd;
  182.             }
  183.             .code-wrapper:hover .button {
  184.                 display: block;
  185.             }
  186.             .code-wrapper.fullscreen {
  187.                 background: white;
  188.                 color: black;
  189.                 width: 100%;
  190.                 height: 100%;
  191.                 overflow: auto;
  192.                 margin: 0;
  193.                 padding: 20px;
  194.             }
  195.             .code-wrapper.fullscreen .hljs {
  196.                 display: block;
  197.                 overflow-x: auto;
  198.                 padding: 0.5em;
  199.                 color: inherit;
  200.                 background: inherit;
  201.             }
  202.         `;
  203.         document.head.appendChild(style);
  204.     }
  205.  
  206.     // Function to toggle fullscreen for the specific code block
  207.     function toggleFullScreen(codeWrapper) {
  208.         if (!document.fullscreenElement && codeWrapper.requestFullscreen) {
  209.             codeWrapper.requestFullscreen().then(() => {
  210.                 codeWrapper.classList.add('fullscreen');
  211.                 codeWrapper.querySelector('code').classList.forEach(cls => {
  212.                     codeWrapper.classList.add(cls);
  213.                 });
  214.             });
  215.         } else if (document.fullscreenElement && document.exitFullscreen) {
  216.             document.exitFullscreen().then(() => {
  217.                 codeWrapper.classList.remove('fullscreen');
  218.                 codeWrapper.querySelector('code').classList.forEach(cls => {
  219.                     codeWrapper.classList.remove(cls);
  220.                 });
  221.             });
  222.         }
  223.     }
  224.  
  225.     // Function to copy code to clipboard
  226.     function copyToClipboard(codeWrapper) {
  227.         const code = codeWrapper.querySelector('code').innerText;
  228.         navigator.clipboard.writeText(code).then(() => {
  229.             console.log('Code copied to clipboard!');
  230.             Toast("Code copied to clipboard!", 100);
  231.  
  232.             // codeWrapper.textContent="Copied";
  233.             // setTimeout( ()=>copyBtn.textContent="Copy", 1*1000);
  234.  
  235.         }).catch(err => {
  236.             console.error('Error copying code to clipboard: ', err);
  237.         });
  238.     }
  239.  
  240.     // Function to create fullscreen and copy buttons for each code block
  241.     function addButtons() {
  242.         document.querySelectorAll('pre code').forEach((code) => {
  243.             let wrapper = code.closest('.code-wrapper');
  244.             if (!wrapper) {
  245.                 wrapper = document.createElement('div');
  246.                 wrapper.classList.add('code-wrapper');
  247.                 code.classList.forEach(cls => {
  248.                     if (cls !== 'hljs') {
  249.                         wrapper.classList.add(cls);
  250.                     }
  251.                 });
  252.                 code.parentNode.insertBefore(wrapper, code);
  253.                 wrapper.appendChild(code);
  254.             }
  255.  
  256.             if (!wrapper.querySelector('.fullscreen-btn')) {
  257.                 const fullscreenBtn = document.createElement('button');
  258.                 fullscreenBtn.textContent = 'Fullscreen';
  259.                 fullscreenBtn.classList.add('fullscreen-btn', 'button');
  260.                 fullscreenBtn.addEventListener('click', () => toggleFullScreen(wrapper));
  261.                 wrapper.appendChild(fullscreenBtn);
  262.             }
  263.  
  264.             // Add copy button
  265.             if (!wrapper.querySelector('.copy-btn')) {
  266.                 const copyBtn = document.createElement('button');
  267.                 copyBtn.textContent = 'Copy';
  268.                 copyBtn.classList.add('copy-btn', 'button');
  269.                 copyBtn.addEventListener('click', () => copyToClipboard(wrapper));
  270.                 wrapper.appendChild(copyBtn);
  271.             }
  272.         });
  273.     }
  274.  
  275.     // Wait for the DOM to be fully loaded
  276.     window.addEventListener('load', function() {
  277.         addStyles();
  278.         setTimeout(addButtons, 0);
  279.     });
  280. })();