Visualisateur plein écran de code StackExchange
Un script utilisateur complet qui améliore l'expérience d'affichage du code sur les sites StackExchange en ajoutant des fonctionnalités de plein écran et de copie aux blocs de code.
## Caractéristiques
🔍 ** Affichage de code à plein écran**
- Ouvre des blocs de code dans un nouvel onglet dédié pour une visualisation sans distraction
- Préserver la syntaxe originale mise en évidence avec un schéma de couleurs amélioré
- Conception réactive qui utilise l'immobilier à plein écran
- Interface propre et minimaliste optimisée pour la lecture de code
📋 ** Copie de code en un clic**
- Copier n'importe quel bloc de code au presse-papiers en un seul clic
- La rétroaction visuelle confirme le succès de l'opération de copie
- Fonctionne parfaitement avec la page originale et la vue plein écran
🎨 ** Syntaxe mise en évidence**
- Maintient la syntaxe originale StackExchange mise en évidence
- Mise en évidence améliorée en mode plein écran en utilisant Highlight.js
- Détection et préservation automatiques du langage
- schéma de couleurs de style GitHub pour une lisibilité optimale
⌨️ ** Raccourcis clavier**
- Escape: Fermer l'onglet plein écran
- Contrôles intuitifs pour une navigation efficace
## Installation
- Installez un gestionnaire de scripts d'utilisateur (Tampermonkey, Greasemonkey, etc.)
- Installez ce script à partir du script utilisateur
- Visitez n’importe quel site StackExchange avec des blocs de code
- Passez le curseur sur les blocs de code pour voir les nouveaux boutons
## Utilisation
### Opérations de base
- Passez le curseur sur n'importe quel bloc de code pour révéler les boutons de contrôle
- Cliquez sur "Plein écran" pour ouvrir le code dans un nouvel onglet dédié
- Cliquez sur "Copier" pour copier le code au presse-papiers
- Appuyez sur Escape dans l'onglet plein écran pour fermer
### Afficher plein écran
- Barre d'outils: Position fixe avec les boutons Copier et Fermer
- Syntax Highlighting: Appliqué automatiquement en fonction du langage détecté
- Responsive Layout : le code remplit l'espace disponible sur l'écran
- Navigation par clavier: Soutien de la touche Escape pour une sortie rapide
## Sites pris en charge
Le script fonctionne sur tout le réseau StackExchange :
### Sites principaux
- Stack Overflow - Toutes les questions de programmation et exemples de code
- Super utilisateur - Administration système et code utilisateur puissant
- Faute du serveur - Scripts d'administration du serveur et du réseau
- Demandez à Ubuntu - Ligne de commande et configuration Ubuntu/Linux
- Math Overflow - Code mathématique et algorithmes
### Couverture supplémentaire
- Tous les sous-sites StackExchange (200+ communautés)
- Meta sites pour toutes les plateformes prises en charge
- Examen des files d'attente et résultats de recherche
- StackApps pour les exemples de code liés à l'API
## Détails techniques
### Mise en œuvre
- JavaScript pur - Aucune dépendance externe sur la page principale
- Intégration CDN - Highlight.js chargé en onglets plein écran
- Non intrusif - préserve le style et la fonctionnalité de la page originale
- Performance optimisée - Impact minimal sur les temps de chargement des pages
### Compatibilité du navigateur
- Chrome/Chromium - Support complet
- Firefox - Support complet
- Safari - Support complet
- Edge - Support complet
- Navigateurs mobiles - Fonctionnalités de base
### Sécurité
- MIT Licensed - Open source et auditable
- Aucune collecte de données - Fonctionne entièrement côté client
- Contrôles pop-up - Manipulation gracieuse des bloceurs de pop-up
- Execution sécurisée - Aucune injection de script externe sur les pages principales
## Structure du code
### Composants principaux
JavaScript
// Fonctions de base
addStyles() // Injecte le CSS pour les boutons et les mises en page
addButtons() // Crée des boutons d'orientation pour les blocs de code
openCodeInNewTab() // Génére une expérience de visualisation plein écran
copyToClipboard() // Gére la fonctionnalité de copie de code
### Architecture CSS
- **Enveloppements transparents** - Ne pas interférer avec le style original
- **Responsive design** - S'adapte à différentes tailles d'écran
- **Interactions avec le curseur** - Expérience utilisateur propre et intuitive
- **Optimisation plein écran** - Lisibilité maximale en vue dédiée
### Gestion des événements
- **Charger des événements** - Initialise après le chargement du contenu de la page
- **Etats de hover** - Affiche/masque les boutons de commande
- **Gestionnaires de clics** - Gére les opérations de copie et de plein écran
- **Événements du clavier** - Support de la touche Escape en plein écran
## Personnalisation
### Options de styling
Le script peut être personnalisé en modifiant les variables CSS :
CSS
/* Appearance du bouton */
.bouton {
couleur de fond: #eee; /* Fond du bouton */
taille de police: 12px; /* Taille du texte du bouton */
rembourrage: 4px 8px; /* Espacement des boutons */
}
/* Style plein écran */
bouton de la barre d'outils {
fond: #007acc; /* Couleur du bouton de la barre d'outils */
couleur: blanc; /* Couleur du texte de la barre d'outils */
}
### Support linguistique
La mise en évidence de syntaxe prend en charge plus de 190 langages de programmation, y compris:
- Web: JavaScript, TypeScript, HTML, CSS, SCSS
- Backend: Python, Java, C#, PHP, Ruby, Go, Rust
- Systèmes: C, C++, Assemblage, Shell/Bash
- Données: SQL, JSON, XML, YAML, CSV
- Fonctionnel: Haskell, Lisp, Erlang, F#
- Mobile: Swift, Kotlin, Dart
- Et bien d'autres. ..**
## Dépannage
### Problèmes communs
*** Boutons non apparus ***
Assurez-vous que le gestionnaire userscript est activé
- Vérifiez si le site est dans les modèles de correspondance pris en charge
- Actualiser la page après l'installation
** Popup bloqué en plein écran **
- Autoriser les pop-ups pour les domaines StackExchange
- Vérifiez les paramètres de bloqueur de pop-up du navigateur
- Essayez de cliquer directement sur le bouton (pas pendant la transition du curseur)
** Syntaxe mise en évidence ne fonctionne pas **
- Vérifiez la connexion Internet (dépendance CDN en plein écran)
Vérifiez que le bloc de code a une classe de langue appropriée
- Essayez de rafraîchir l'onglet plein écran
** La copie ne fonctionne pas **
- Assurer une connexion HTTPS (exigence API du presse-papiers)
- Vérifiez les autorisations du presse-papiers du navigateur
- Essayez d'utiliser Ctrl + C comme sauvegarde
### Optimisation des performances
- Le script se charge asynchronement pour éviter de bloquer le rendu de la page
- Les modifications minimales du DOM préservent la fonctionnalité originale
- La délégation d'événements réduit l'empreinte mémoire
- Transitions CSS optimisées pour des interactions fluides
## Licence
Licence MIT - Gratuit pour usage personnel et commercial.
## Support
Pour les questions, les demandes de fonctionnalités ou les contributions :
- Problèmes GitHub: Signaler des bugs et demander des fonctionnalités
- StackExchange Meta: Discutez des améliorations avec la communauté
- Commentaires UserScript: Partager des commentaires et des conseils
