← Tous les articles

Tutoriels

Ajustements GitHub et sites de développeurs avec JustZix

17 mai 2026 · par JustZix Team

Si vous lisez du code toute la journée, la mise en page par défaut de GitHub gaspille de l'espace : colonnes de diff étroites, en-têtes de fichiers qui défilent hors vue, barres latérales que vous n'utilisez jamais. Les règles JustZix limitées à github.com vous permettent d'ajuster l'expérience de lecture sans drapeaux de navigateur ni extensions que vous ne pouvez pas auditer.

Utiliser toute la largeur de la fenêtre

GitHub plafonne la largeur du contenu sur beaucoup de pages. Sur un écran large, cela laisse d'énormes marges vides autour d'une fine colonne de code. Créez une règle CSS correspondant à *://github.com/* et récupérez l'espace.

/* Laisser les pages de dépôt et de code s'étendre sur la fenêtre */
.container-xl,
.container-lg,
.repository-content {
  max-width: 100% !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

C'est un changement de mise en page uniquement. Rien concernant la navigation ou les fonctionnalités ne bouge — vous cessez simplement de fixer des gouttières vides.

Épingler l'en-tête de fichier pendant le défilement

Quand vous faites défiler un long fichier, l'en-tête avec le nom de fichier, le blame et les liens bruts disparaît. Un en-tête collant garde votre contexte. GitHub marque déjà la barre d'actions de fichier, donc vous n'avez besoin que du positionnement.

/* Garder la barre d'actions de fichier visible */
.file-header,
.react-blob-header-edit-and-raw-actions {
  position: sticky !important;
  top: 0;
  z-index: 20;
  background: var(--bgColor-default, #fff) !important;
}

Sur la vue diff, la même idée épingle l'en-tête de chaque fichier pour que vous sachiez toujours à quel fichier appartient une section :

/* En-têtes collants par fichier dans les diffs de pull request */
.file.js-file .file-header {
  position: sticky !important;
  top: 0;
  z-index: 5;
}

Du code plus grand et plus lisible

La taille de police du code par défaut convient pour un survol, moins pour une revue. Augmentez-la et resserrez la hauteur de ligne en une seule règle.

/* Typographie de code confortable */
.blob-code-inner,
.react-code-text,
.CodeMirror,
pre code {
  font-size: 14px !important;
  line-height: 1.6 !important;
}

Choisissez une taille qui convient à votre écran. Comme la règle est limitée à GitHub, elle ne touche jamais les blocs de code sur d'autres sites.

Masquer ce que vous n'utilisez pas

Beaucoup de panneaux GitHub sont du pur bruit pour le travail quotidien — le badge « Utilisé par », les boutons de parrainage, le fil d'activité sur votre tableau de bord. Élaguez-les.

/* Désordre de la barre latérale de dépôt */
.BorderGrid-cell:has(a[href$="/network/dependents"]),
.js-sponsors-button,
.flash-warn.flash-full { display: none !important; }

Ajustez la liste à votre goût — chaque ligne est indépendante, donc retirer un sélecteur ne fait réapparaître que ce panneau.

Sauter au diff d'une frappe

Une petite règle JavaScript peut ajouter un raccourci. Limitez une règle JS à *://github.com/*/pull/* et appuyez sur d pour défiler droit vers l'onglet « Files changed ».

document.addEventListener('keydown', (e) => {
  // Ignorer la saisie dans les champs et les zones de texte.
  const tag = (e.target.tagName || '').toLowerCase();
  if (tag === 'input' || tag === 'textarea' || e.target.isContentEditable) {
    return;
  }
  if (e.key === 'd') {
    const filesTab = document.querySelector('a[href$="/files"]');
    if (filesTab) filesTab.click();
  }
});

Elle ne fait que lire les événements clavier et cliquer un lien existant — aucune requête réseau, rien d'écrit nulle part. Pure commodité.

Construisez votre propre profil de développeur

La même approche fonctionne sur GitLab, MDN, Stack Overflow ou tout site de documentation : limitez une règle CSS au domaine, élargissez le contenu, corrigez la typographie, masquez l'habillage. Gardez les règles de chaque site séparées pour qu'une refonte sur l'un ne casse jamais un autre.

Trouvez plus de recettes axées développeur dans nos exemples prêts à l'emploi, et si vous venez d'un gestionnaire de userscripts, lisez la migration de Tampermonkey vers JustZix. Prêt à commencer ? Téléchargez JustZix et collez d'abord la règle de pleine largeur.