← Todos los artículos

Tutoriales

Ajustes de GitHub y sitios para desarrolladores con JustZix

17 mayo 2026 · por JustZix Team

Si lees código todo el día, la maquetación por defecto de GitHub desperdicia espacio: columnas de diff estrechas, cabeceras de archivo que se desplazan fuera de vista, barras laterales que nunca usas. Las reglas de JustZix limitadas a github.com te permiten afinar la experiencia de lectura sin indicadores del navegador ni extensiones que no puedes auditar.

Usa todo el ancho de la ventana

GitHub limita el ancho del contenido en muchas páginas. En un monitor ancho eso deja enormes márgenes vacíos alrededor de una fina columna de código. Crea una regla CSS que coincida con *://github.com/* y recupera el espacio.

/* Dejar que las páginas de repo y código abarquen la ventana */
.container-xl,
.container-lg,
.repository-content {
  max-width: 100% !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

Esto es un cambio solo de maquetación. Nada de la navegación ni de la funcionalidad se mueve — simplemente dejas de mirar canalones vacíos.

Fija la cabecera del archivo mientras te desplazas

Cuando te desplazas por un archivo largo, la cabecera con el nombre del archivo, los enlaces de blame y raw desaparece. Una cabecera fija mantiene tu contexto. GitHub ya marca la barra de acciones del archivo, así que solo necesitas el posicionamiento.

/* Mantener visible la barra de acciones del archivo */
.file-header,
.react-blob-header-edit-and-raw-actions {
  position: sticky !important;
  top: 0;
  z-index: 20;
  background: var(--bgColor-default, #fff) !important;
}

En la vista de diff, la misma idea fija la cabecera de cada archivo para que siempre sepas a qué archivo pertenece un fragmento:

/* Cabeceras de archivo fijas por archivo en los diffs de pull request */
.file.js-file .file-header {
  position: sticky !important;
  top: 0;
  z-index: 5;
}

Código más grande y legible

El tamaño de fuente del código por defecto está bien para echar un vistazo, menos para revisar. Súbelo y aprieta la altura de línea en una regla.

/* Tipografía de código cómoda */
.blob-code-inner,
.react-code-text,
.CodeMirror,
pre code {
  font-size: 14px !important;
  line-height: 1.6 !important;
}

Elige un tamaño que se adapte a tu pantalla. Como la regla está limitada a GitHub, nunca toca los bloques de código de otros sitios.

Oculta lo que no usas

Muchos paneles de GitHub son puro ruido para el trabajo del día a día — la insignia de "Usado por", los botones de patrocinio, el feed de actividad de tu panel. Recórtalos.

/* Desorden de la barra lateral del repo */
.BorderGrid-cell:has(a[href$="/network/dependents"]),
.js-sponsors-button,
.flash-warn.flash-full { display: none !important; }

Ajusta la lista a tu gusto — cada línea es independiente, así que quitar un selector solo deja de ocultar ese panel.

Salta al diff con una pulsación de tecla

Una pequeña regla de JavaScript puede añadir un atajo. Limita una regla JS a *://github.com/*/pull/* y pulsa d para desplazarte directamente a la pestaña "Files changed".

document.addEventListener('keydown', (e) => {
  // Ignorar la escritura en campos de entrada y áreas de texto.
  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();
  }
});

Solo lee eventos de tecla y hace clic en un enlace existente — sin peticiones de red, nada escrito en ningún sitio. Pura comodidad.

Crea tu propio perfil de desarrollador

El mismo enfoque funciona en GitLab, MDN, Stack Overflow o cualquier sitio de documentación: limita una regla CSS al dominio, ensancha el contenido, arregla la tipografía, oculta la interfaz. Mantén las reglas de cada sitio por separado para que un rediseño en uno nunca rompa otro.

Encuentra más recetas centradas en desarrolladores en nuestros ejemplos listos para usar, y si vienes de un gestor de userscripts, lee migrar de Tampermonkey a JustZix. ¿Listo para empezar? Descarga JustZix y pega primero la regla de ancho completo.