Visualizador de pantalla completa de código StackExchange
Un script de usuario integral que mejora la experiencia de visualización de código en los sitios de StackExchange mediante la adición de pantalla completa y la funcionalidad de copia a los bloques de código.
## Características
🔍 ** Visualización de código en pantalla completa**
- Abre bloques de código en una nueva pestaña dedicada para la visualización sin distracciones
- Preserva el resaltado de sintaxis original con esquema de color mejorado
- Diseño responsivo que utiliza bienes raíces de pantalla completa
- Interfaz limpia y minimalista optimizada para la lectura de código
📋 ** Copia de código con un solo clic**
- Copia cualquier bloque de código al portapapeles con un solo clic
- La retroalimentación visual confirma la operación de copia exitosa
- Funciona sin problemas tanto con la página original como con la vista de pantalla completa
🎨 ** Destacado de sintaxis**
- Mantiene el resaltado original de la sintaxis de StackExchange
- Destacado mejorado en modo pantalla completa usando Highlight.js
- Detección y preservación automática del lenguaje
Esquema de colores al estilo GitHub para una legibilidad óptima
⌨️ ** Atajos de teclado**
- Escape: Cerrar pestaña de pantalla completa
- Controles intuitivos para una navegación eficiente
## Instalación
- Instalar un gestor de scripts de usuario (Tampermonkey, Greasemonkey, etc.)
- Instale este script desde el userscript
- Visite cualquier sitio de StackExchange con bloques de código
- Pasa el cursor sobre los bloques de código para ver los nuevos botones
## Uso
### Operaciones básicas
- Mover el cursor sobre cualquier bloque de código para revelar los botones de control
- Haga clic en "Pantalla completa" para abrir el código en una nueva pestaña dedicada
- Haga clic en "Copiar" para copiar el código al portapapeles
- Presione Escape en la pestaña de pantalla completa para cerrar
### Características de pantalla completa
- Barra de herramientas: Posición fija con botones Copiar y Cerrar
- Resaltado de sintaxis: Aplicado automáticamente en función del lenguaje detectado
- Diseño Responsivo: El código llena el espacio disponible en la pantalla
- Navegación del teclado: Soporte de la tecla de escape para la salida rápida
# Sitios compatibles
El script funciona en toda la red de StackExchange:
### Sitios principales
- Overflow de pila - Todas las preguntas de programación y ejemplos de código
- Super User - Administración del sistema y código de usuario potencial
- Server Fault - Scripts de administración de servidor y red
- Pregunta a Ubuntu - Línea de comandos y configuración de Ubuntu/Linux
- Math Overflow - Código matemático y algoritmos
### Cobertura adicional
- Todos los subsitios de StackExchange (más de 200 comunidades)
- Meta sitios para todas las plataformas compatibles
- Revisar colas y resultados de búsqueda
StackApps para ejemplos de código relacionados con API
## Detalles técnicos
### Implementación
- JavaScript puro - No hay dependencias externas en la página principal
- Integración CDN - Highlight.js cargado en pestañas de pantalla completa
- No intrusivo - Preserva el estilo y la funcionalidad de la página original
- Rendimiento optimizado - Impacto mínimo en los tiempos de carga de la página
### Compatibilidad con el navegador
- Chrome/Chromium - Soporte completo
- Firefox - Soporte completo
- Safari - Soporte completo
- Edge - Soporte completo
- Navegadores móviles - Funcionalidad básica
### Seguridad
- MIT Licensed - Código abierto y auditable
- No hay recopilación de datos - Opera totalmente del lado del cliente
- Controles emergentes - Manejo gracioso de bloqueadores de emergentes
- Ejecución segura - No hay inyección de script externo en las páginas principales
## Estructura del código
### Componentes principales
JavaScript
// Funciones básicas
addStyles() // Inyecta CSS para botones y diseños
addButtons() // Crea botones de desplazamiento para bloques de código
openCodeInNewTab() // Genera una experiencia de visualización de pantalla completa
copyToClipboard() // Maneja la funcionalidad de copia de código
### Arquitectura CSS
- **Envolturas transparentes** - No interfiera con el estilo original
- **Diseño responsivo** - Se adapta a diferentes tamaños de pantalla
- **Hover interacciones** - Experiencia de usuario limpia e intuitiva
- **Optimización de pantalla completa** - Máxima legibilidad en vista dedicada
### Manejo de eventos
- **Carga eventos** - Inicializa después de cargar el contenido de la página
- **Hover estados** - Mostra/oculta botones de control
- **Manipuladores de clic** - Gestiona operaciones de pantalla completa y copia
- **Eventos del teclado** - Soporte de teclas de escape en pantalla completa
## Personalización
### Opciones de Estilo
El script se puede personalizar modificando las variables CSS:
CSS
/* Apariencia del botón */
.botón {
color de fondo: #eee; /* Fondo del botón */
tamaño de fuente: 12px; /* Tamaño del texto del botón */
acolchado: 4px 8px; /* Espaciamiento de botones */
}
/* Estilo de pantalla completa */
botón de la barra de herramientas {
fondo: #007acc; /* Color del botón de la barra de herramientas */
color: blanco; /* Color del texto de la barra de herramientas */
}
### Soporte de idiomas
El resaltado de sintaxis soporta más de 190 lenguajes de programación, incluyendo:
- Web: JavaScript, TypeScript, HTML, CSS, SCSS
- Backend: Python, Java, C#, PHP, Ruby, Go, Rust
- Sistemas: C, C++, Asamblea, Shell/Bash
- Datos: SQL, JSON, XML, YAML, CSV
- Funcional: Haskell, Lisp, Erlang, F#
- Móvil: Swift, Kotlin, Dart
- ** Y muchos más. ..**
## Solución de problemas
### Problemas comunes
No aparecen botones
Asegúrese de que el gestor de scripts de usuario está habilitado
- Compruebe si el sitio está en patrones compatibles
- Actualizar la página después de la instalación
Popup bloqueado en pantalla completa
- Permitir ventanas emergentes para dominios StackExchange
- Compruebe la configuración del bloqueador de pop-up del navegador
- Intenta hacer clic directamente en el botón (no durante la transición del cursor)
** Destacado de sintaxis no funciona **
- Compruebe la conexión a Internet (dependencia de CDN en pantalla completa)
- Verifique que el bloque de código tiene la clase de idioma adecuada
- Intenta refrescar la pestaña de pantalla completa
** Copia no funciona **
- Asegurar la conexión HTTPS (requisito API del portapapeles)
- Compruebe los permisos del portapapeles del navegador
- Intenta usar Ctrl + C como reserva
### Optimización del rendimiento
- El script se carga de forma asíncrona para evitar bloquear la renderización de la página
- Modificaciones mínimas del DOM conservan la funcionalidad original
- La delegación de eventos reduce la huella de memoria
- Transiciones CSS optimizadas para interacciones suaves
## Licencia
Licencia MIT - Gratis para uso personal y comercial.
## Apoyo
Para problemas, solicitudes de características o contribuciones:
- Problemas de GitHub: Informar bugs y solicitar funciones
- Meta de StackExchange: Discuta mejoras con la comunidad
- Comentarios de UserScript: Comparte comentarios y consejos
