☰

在 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
  • 还有更多。..

故障排除

常见问题

按钮未出现

  • 确保启用了用户脚本管理器
  • 检查站点是否处于支持的匹配模式中
  • 安装后刷新页面

全屏时弹出窗口被阻止

  • 允许StackExchange域的弹出窗口
  • 检查浏览器弹出窗口阻止程序设置
  • 尝试直接点击按钮（不要在悬停过渡期间）

语法高亮显示不起作用

  • 检查互联网连接（全屏模式下的CDN依赖性）
  • 验证代码块是否具有正确的语言类
  • 尝试刷新全屏选项卡

复制不起作用

  • 确保HTTPS连接（剪贴板API要求）
  • 检查浏览器剪贴板权限
  • 尝试使用Ctrl+C作为回退

性能优化

  • 异步加载脚本以避免阻止页面呈现
  • 最少的DOM修改保留了原始功能
  • 事件委派减少了内存占用
  • 优化CSS过渡以实现流畅交互

许可证

MIT许可证- 个人和商业用途免费。

支持

对于问题、功能请求或贡献：

  • GitHub问题：报告错误和请求功能
  • StackExchange Meta：与社区讨论改进
  • UserScript评论：分享反馈和技巧