在 StackExchange 網站上將程式碼擴展至全螢幕

懸停時切換程式碼區塊的全螢幕模式

目前為 2025-10-09 提交的版本,檢視 最新版本

作者
138 Aspen
評價
0 0 0
版本
0.1.4
建立日期
2024-02-15
更新日期
2025-10-09
尺寸
17.3 KB
授權條款
MIT
腳本執行於

StackExchange程式碼全屏檢視器

一個全面的用戶腳本,通過向程式碼塊添加全屏和複製功能來增强StackExchange網站上的程式碼查看體驗。

特點

🔍 ** 全屏程式碼查看**

-在專用的新選項卡中打開程式碼塊,以便無干擾地查看 -通過增强的配色方案保留原始語法突出顯示 -響應式設計,利用全屏空間 -簡潔、極簡的介面,針對程式碼閱讀進行了優化

📋 ** 一鍵式程式碼複製**

-只需按一下一下,即可將任何程式碼塊複製到剪貼板 -視覺迴響確認複製操作成功 -與原始頁面和全屏視圖無縫合作

🎨 ** 語法高亮顯示**

-保持原始StackExchange語法高亮顯示 -使用Highlight.js在全屏模式下增强突出顯示 -自動語言檢測和保存 -GitHub風格的配色方案,實現最佳可讀性

⌨️ ** 鍵盤快速鍵**

-退出:關閉全屏選項卡 -直觀的控制,實現高效導航

安裝

1.安裝用戶腳本管理器(Tampermonkey、Greasemonkey等) 2.從用戶腳本安裝此腳本 3.訪問任何帶有程式碼塊的StackExchange網站 4.將滑鼠懸停在程式碼塊上以查看新按鈕

使用方法

基本操作

1.將滑鼠懸停在任何程式碼塊上以顯示控制按鈕 2.點擊“全屏”在新的專用選項卡中打開程式碼 3.點擊“複製”將程式碼複製到剪貼板 4.在全屏選項卡中按Esc**關閉

全屏視圖功能

-工具列:帶有複製和關閉按鈕的固定位置 -語法高亮顯示:根據檢測到的語言自動應用 -響應式佈局:程式碼填充可用荧幕空間 -鍵盤導航:支持快速鍵退出

支持的網站

該腳本適用於整個StackExchange網絡:

主要網站

-堆疊溢位-所有程式設計問題和程式碼示例 -超級用戶-系統管理和高級用戶程式碼 -服務器故障-服務器和網路管理腳本 -詢問Ubuntu-Ubuntu/Linux命令列和配寘 -數學溢出-數學程式碼和算灋

附加保險

-所有StackExchange子網站(200多個社區) -所有支持平臺的元網站 -查看隊列搜索結果 -用於API相關程式碼示例的StackApps

科技細節

實施

-純JavaScript-不依賴於主頁 -CDN集成-在全屏選項卡中加載Highlight.js -非侵入式-保留原始頁面樣式和功能 -性能優化-對頁面加載時間的影響最小

瀏覽器相容性

-Chrome/Chromium-完全支持 -Firefox-完全支持 -Safari-完全支持 -Edge-完全支持 -移動瀏覽器-基本功能

安全

-MIT許可-開源和可稽核 -無數據收集-完全在用戶端運行 -彈出控制項-巧妙地處理快顯視窗封锁程式 -安全執行-主頁上沒有外部腳本注入

程式碼結構

主要部件

//覈心功能
addStyles()//為按鈕和佈局注入CSS
addButtons()//為程式碼塊創建懸停按鈕
openCodeInNewTab()//生成全屏查看體驗
copyToClipboard()//處理程式碼複製功能

CSS架構

-透明包裝-不要干擾原始造型 -響應式設計-適應不同的螢幕尺寸 -懸停互動-乾淨、直觀的用戶體驗 -全屏優化-專用視圖中的最大可讀性

事件處理

-加載事件-頁面內容加載後初始化 -懸停狀態-顯示/隱藏控制按鈕 -點擊處理程式-管理全屏和複製操作 -鍵盤事件-全屏退出鍵支持

定制化

造型選項

可以通過修改CSS變數來定制腳本:

/* Button appearance */
.button {
    background-color: #eee;  /* Button background */
    font-size: 12px;         /* Button text size */
    padding: 4px 8px;        /* Button spacing */
}

/* Fullscreen styling */
.toolbar button {
    background: #007acc;     /* Toolbar button color */
    color: white;            /* Toolbar text color */
}

語言支持

語法高亮顯示支持190多種程式設計語言,包括: -Web:JavaScript、TypeScript、HTML、CSS、SCSS -後端:Python、Java、C#、PHP、Ruby、Go、Rust -系統:C、C++、彙編、Shell/Bash -數據:SQL、JSON、XML、YAML、CSV -函數式:Haskell、Lisp、Erlang、F# -手機:Swift、Kotlin、Dart -還有更多。 ..

故障排除

常見問題

按鈕未出現 -確保啟用了用戶腳本管理器 -檢查網站是否處於支持的匹配模式中 -安裝後刷新頁面

全屏時快顯視窗被封锁 -允許StackExchang e域的快顯視窗 -檢查瀏覽器快顯視窗封锁程式設定 -嘗試直接點擊按鈕(不要在懸停過渡期間)

語法高亮顯示不起作用 -檢查互聯網連接(全屏模式下的CDN依賴性) -驗證程式碼塊是否具有正確的語言類 -嘗試重繪全屏選項卡

複製不起作用 -確保HTTPS連接(剪貼板API要求) -檢查瀏覽器剪貼板許可權 -嘗試使用Ctrl+C作為回退

性能優化

-非同步加載腳本以避免封锁頁面呈現 -最少的DOM修改保留了原始功能 -事件委派减少了記憶體佔用 -優化CSS過渡以實現流暢互動

許可證

MIT許可證-個人和商業用途免費。

支持

對於問題、功能請求或貢獻: -GitHub問題:報告錯誤和請求功能 -StackExchange Meta:與社區討論改進 -UserScript評論:分享迴響和技巧