在 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评论:分享反馈和技巧