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

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

您需要先安裝使用者腳本管理器擴展,如 TampermonkeyGreasemonkeyViolentmonkey 之後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyUserscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展,比如 Tampermonkey,才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

(我已經安裝了使用者腳本管理器,讓我安裝!)

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

(我已經安裝了使用者樣式管理器,讓我安裝!)

作者
138 Aspen
今日安裝
0
安裝總數
10
評價
0 0 0
版本
0.1.4
建立日期
2024-02-15
更新日期
2025-09-18
尺寸
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評論:分享迴響和技巧