Estamos experimentando con la reducción del tamaño del texto y la altura de línea, y el aumento de la altura de los bloques de código, para mejorar la legibilidad de bloques de código más grandes. Esto es principalmente problemático para bloques de código que superan las 20 líneas o más. El resultado es que se puede ver más código en la ventana normal.
Antes
Después
El cambio se ha realizado aquí:
Parece que cambiar el tamaño de fuente de código en línea como este es probablemente un efecto secundario no intencionado?
Sí, eso fue involuntario, deberíamos modificarlo para que solo se cambien los bloques completos y no el código en línea.
Para que conste, solo uso esto en mi instancia de desarrollo hackity hack:
pre code {
font-size: var(--font-down-1);
}
resultado
He enviado una PR para eliminar los cambios de estilo en el texto de monospace en línea, y también para aumentar ligeramente la altura de línea en los bloques <pre>.
Esto lamentablemente está perjudicando la legibilidad en fragmentos más cortos.
Por ejemplo:
La fuente es más pequeña, la altura de línea es más corta.
¿Puede esto afectar solo a bloques de código muy largos? ¿Debería ser este un cambio fundamental @jordan.vidrine?
Quiero destacar aquí también la diferencia entre este experimento y Stack Overflow.
Experimento actual
Stack Overflow
Algunas cosas que noto de inmediato son:
Necesito investigar más sobre hljs y ver por qué nuestro caso de uso pone en negrita los títulos.
Me encanta que hayas mirado Stack Overflow, porque si alguien hubiera descubierto cómo mostrar bloques de código, serían ellos.
Otra observación, el tamaño de la fuente no parece estar cambiando a pesar de que sí lo hace… (15px → 13px pero los colores compensan un poco)
El ritmo visual y la altura de línea se sienten mucho mejor aquí:
Stack Overflow
Experimento Actual
La altura de línea es notablemente un problema y nuestro “encogimiento” fue demasiado lejos porque nuestra fuente base es más grande y espaciosa que la de Stack Overflow.
Apoyo totalmente la eliminación de negritas en nuestro experimento actual y el aumento del tamaño y la altura de línea.
Este PR realizó los siguientes cambios: https://github.com/discourse-org/design-experiments/pull/77
Eso se ve genial, Jordan. En este caso, creo que usar el peso de fuente consistente ayuda a la legibilidad. También me gusta el relleno aumentado.
Gracias, estoy de acuerdo. Creo que también me gustaría echar un vistazo a los colores y por qué hljs está usando los colores que está usando. No he visto este patrón de colores utilizado en ningún lugar en línea.
Me gusta el cambio de tipografía, pero creo que el fondo oscuro es demasiado. El fondo más claro es mucho más fácil de leer.
Cambio entrante.
Después de investigar más, veo que los colores que estamos usando se basan en un esquema anticuado utilizado por github, posiblemente hace 10 años, o tan pronto como hace 4.
¿Hay espacio aquí para cambiar los colores predeterminados a algo actualizado?
Github tiene un esquema de color actualizado desde entonces, junto con otras opciones para ser un esquema claro predeterminado.
Stack Overflow
Atom One Light
Nuevo Github
hljs default 
Mi preferencia personal se inclinaría por algo con colores más apagados; en tus ejemplos, Stack Overflow es mi elección.
después de un par de días todavía tengo que entrecerrar los ojos un poco con el tamaño de fuente más pequeño, no creo que valga la pena el ahorro de espacio
¿Sientes lo mismo en Stack Overflow (por ejemplo)? El tamaño de fuente y el cálculo de la altura de línea son los mismos ahora entre Discourse y SO.
max-height en Discourse es ligeramente menor, 500px frente a 600px.
El contraste es mucho peor en nuestro caso y marca una gran diferencia cuando intentas leer texto pequeño, por ejemplo (Stack Overflow a la derecha):
Sí, veo a qué te refieres.
¿Qué opinas de estos cambios en el PR que tengo abierto: https://github.com/discourse-org/design-experiments/pull/79
Aquí hay una opción en la que agrego negro al fondo en modo oscuro, en lugar de usar algo basado en secundario o primario. Lo hago a través de rgba(0,0,0,0.25)
¿Alguien podría hacer una prueba con el componente/tema de numeración de líneas de bloques de código reciente también incluido? Gracias de antemano.
