← Все статьи

Туториалы

Настройки GitHub и сайтов для разработчиков с JustZix

17 мая 2026 · автор JustZix Team

Если вы читаете код весь день, вёрстка GitHub по умолчанию тратит место: узкие колонки diff, заголовки файлов, уезжающие при прокрутке, боковые панели, которыми вы никогда не пользуетесь. Правила JustZix, привязанные к github.com, позволяют настроить опыт чтения без флагов браузера или расширений, которые вы не можете проверить.

Используйте всю ширину окна

GitHub ограничивает ширину контента на многих страницах. На широком мониторе это оставляет огромные пустые поля вокруг тонкой колонки кода. Создайте CSS-правило, совпадающее с *://github.com/*, и верните себе место.

/* Пусть страницы репозитория и кода занимают всё окно */
.container-xl,
.container-lg,
.repository-content {
  max-width: 100% !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

Это изменение только вёрстки. Ничто в навигации или функциональности не сдвигается — вы просто перестаёте смотреть на пустые поля.

Закрепите заголовок файла при прокрутке

Когда вы прокручиваете длинный файл, заголовок с именем файла, blame и ссылками raw исчезает. Липкий заголовок сохраняет ваш контекст. GitHub уже помечает панель действий файла, так что вам нужно только позиционирование.

/* Держать панель действий файла видимой */
.file-header,
.react-blob-header-edit-and-raw-actions {
  position: sticky !important;
  top: 0;
  z-index: 20;
  background: var(--bgColor-default, #fff) !important;
}

В режиме diff та же идея закрепляет заголовок каждого файла, так что вы всегда знаете, какому файлу принадлежит фрагмент:

/* Липкие заголовки на файл в diff пул-реквестов */
.file.js-file .file-header {
  position: sticky !important;
  top: 0;
  z-index: 5;
}

Более крупный, более читаемый код

Размер шрифта кода по умолчанию нормален для беглого просмотра, хуже — для ревью. Поднимите его и подтяните высоту строки в одном правиле.

/* Комфортная типографика кода */
.blob-code-inner,
.react-code-text,
.CodeMirror,
pre code {
  font-size: 14px !important;
  line-height: 1.6 !important;
}

Выберите размер, подходящий вашему дисплею. Поскольку правило привязано к GitHub, оно никогда не трогает блоки кода на других сайтах.

Скройте то, чем не пользуетесь

Многие панели GitHub — чистый шум для повседневной работы: значок «Used by», кнопки спонсоров, лента активности на вашей панели управления. Урежьте их.

/* Хлам в боковой панели репозитория */
.BorderGrid-cell:has(a[href$="/network/dependents"]),
.js-sponsors-button,
.flash-warn.flash-full { display: none !important; }

Подстройте список на вкус — каждая строка независима, так что удаление одного селектора лишь снова показывает эту панель.

Переход к diff одним нажатием

Небольшое JavaScript-правило может добавить сочетание. Привяжите JS-правило к *://github.com/*/pull/* и нажмите d, чтобы прокрутить прямо к вкладке «Files changed».

document.addEventListener('keydown', (e) => {
  // Игнорировать набор в полях ввода и textarea.
  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();
  }
});

Оно только читает события клавиш и кликает существующую ссылку — никаких сетевых запросов, ничего никуда не пишется. Чистое удобство.

Постройте свой профиль для разработки

Тот же подход работает на GitLab, MDN, Stack Overflow или любом сайте документации: привяжите CSS-правило к домену, расширьте контент, почините типографику, скройте оформление. Держите правила каждого сайта отдельно, чтобы редизайн одного никогда не сломал другой.

Найдите больше рецептов для разработчиков в наших готовых примерах, а если вы переходите с менеджера юзерскриптов, прочтите переход с Tampermonkey на JustZix. Готовы начать? Скачайте JustZix и вставьте сначала правило полной ширины.