← Alle Beiträge

Anleitungen

GitHub- und Entwicklerseiten-Anpassungen mit JustZix

17 Mai 2026 · von JustZix Team

Wenn Sie den ganzen Tag Code lesen, verschwendet GitHubs Standard-Layout Platz: schmale Diff-Spalten, Dateikopfzeilen, die wegscrollen, Seitenleisten, die Sie nie verwenden. JustZix-Regeln, beschränkt auf github.com, lassen Sie das Leseerlebnis abstimmen ohne Browser-Flags oder Erweiterungen, die Sie nicht prüfen können.

Die volle Fensterbreite nutzen

GitHub begrenzt die Inhaltsbreite auf vielen Seiten. Auf einem breiten Monitor lässt das riesige leere Ränder um eine dünne Code-Spalte. Erstellen Sie eine CSS-Regel, die auf *://github.com/* passt, und gewinnen Sie den Platz zurück.

/* Repo- und Code-Seiten den Anzeigebereich überspannen lassen */
.container-xl,
.container-lg,
.repository-content {
  max-width: 100% !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

Das ist eine reine Layout-Änderung. Nichts an der Navigation oder Funktionalität bewegt sich — Sie hören einfach auf, leere Ränder anzustarren.

Die Dateikopfzeile beim Scrollen anheften

Wenn Sie durch eine lange Datei scrollen, verschwindet die Kopfzeile mit dem Dateinamen, den Blame- und Raw-Links. Eine fixierte Kopfzeile behält Ihren Kontext. GitHub markiert die Datei-Aktionsleiste bereits, sodass Sie nur die Positionierung brauchen.

/* Die Datei-Aktionsleiste sichtbar halten */
.file-header,
.react-blob-header-edit-and-raw-actions {
  position: sticky !important;
  top: 0;
  z-index: 20;
  background: var(--bgColor-default, #fff) !important;
}

In der Diff-Ansicht heftet dieselbe Idee jede Dateikopfzeile an, sodass Sie immer wissen, zu welcher Datei ein Block gehört:

/* Fixierte Datei-Kopfzeilen in Pull-Request-Diffs */
.file.js-file .file-header {
  position: sticky !important;
  top: 0;
  z-index: 5;
}

Größerer, besser lesbarer Code

Die Standard-Code-Schriftgröße ist zum Überfliegen in Ordnung, weniger für die Überprüfung. Heben Sie sie an und straffen Sie die Zeilenhöhe in einer Regel.

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

Wählen Sie eine Größe, die zu Ihrem Display passt. Da die Regel auf GitHub beschränkt ist, berührt sie nie Code-Blöcke auf anderen Seiten.

Ausblenden, was Sie nicht verwenden

Viele GitHub-Tafeln sind reiner Lärm für die tägliche Arbeit — das "Verwendet von"-Abzeichen, Sponsor-Schaltflächen, der Aktivitäts-Feed auf Ihrem Dashboard. Stutzen Sie sie zurück.

/* Wust in der Repo-Seitenleiste */
.BorderGrid-cell:has(a[href$="/network/dependents"]),
.js-sponsors-button,
.flash-warn.flash-full { display: none !important; }

Passen Sie die Liste nach Geschmack an — jede Zeile ist unabhängig, sodass das Entfernen eines Selektors nur diese Tafel wieder einblendet.

Mit einem Tastendruck zum Diff springen

Eine kleine JavaScript-Regel kann ein Kürzel hinzufügen. Beschränken Sie eine JS-Regel auf *://github.com/*/pull/* und drücken Sie d, um direkt zum "Dateien geändert"-Tab zu scrollen.

document.addEventListener('keydown', (e) => {
  // Tippen in Eingabefeldern und Textbereichen ignorieren.
  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();
  }
});

Es liest nur Tastenereignisse und klickt einen vorhandenen Link — keine Netzwerkanfragen, nichts irgendwohin geschrieben. Reine Annehmlichkeit.

Bauen Sie Ihr eigenes Entwickler-Profil

Derselbe Ansatz funktioniert auf GitLab, MDN, Stack Overflow oder jeder Doku-Seite: Beschränken Sie eine CSS-Regel auf die Domain, verbreitern Sie den Inhalt, beheben Sie die Typografie, blenden Sie die Oberfläche aus. Halten Sie die Regeln jeder Seite getrennt, sodass ein Redesign auf einer nie eine andere kaputtmacht.

Finden Sie mehr entwicklerorientierte Rezepte in unseren fertigen Beispielen, und falls Sie von einem Userscript-Manager kommen, lesen Sie von Tampermonkey zu JustZix migrieren. Bereit anzufangen? Laden Sie JustZix herunter und fügen Sie zuerst die Vollbreiten-Regel ein.