在 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評論:分享迴響和技巧