Nous expérimentons la réduction de la taille du texte et de l’interlignage, et l’augmentation de la hauteur des blocs de code, afin d’améliorer la lisibilité des grands blocs de code. Ceci est surtout problématique pour les grands blocs de code dépassant 20 lignes ou plus. Le résultat est qu’une plus grande quantité de code peut être vue dans la fenêtre d’affichage normale.
Avant
Après
Le changement a été effectué ici :
Il semble que le changement de la taille de la police de code en ligne comme ceci soit probablement un effet secondaire involontaire ?
Oui, c’était involontaire, nous devrions modifier cela pour que seuls les blocs complets soient modifiés et non le code en ligne.
Pour information, j’utilise ceci sur mon instance de développement hackity hack :
pre code {
font-size: var(--font-down-1);
}
résultat
J’ai envoyé une PR pour supprimer les modifications de style sur le texte des monospaces en ligne, et aussi augmenter légèrement la hauteur de ligne dans les blocs <pre>.
Cela nuit malheureusement à la lisibilité des extraits courts.
Par exemple :
La police est plus petite, la hauteur de ligne plus courte.
Est-ce que cela ne peut impacter que les blocs de code très longs ? Est-ce même un changement fondamental @jordan.vidrine ?
Je tiens également à souligner la différence ici entre cette expérience et Stack Overflow.
Expérience actuelle
Stack Overflow
Quelques éléments que je remarque immédiatement :
Je dois approfondir la question de hljs et voir pourquoi notre cas d’utilisation met les titres en gras.
J’adore que vous ayez consulté Stack Overflow, car si quelqu’un a trouvé comment afficher des blocs de code, ce serait eux.
Une autre observation, la taille de la police ne semble pas changer malgré les modifications… (15px → 13px mais les couleurs compensent un peu)
Le rythme visuel et la hauteur de ligne semblent bien meilleurs ici :
Stack Overflow
Expérience actuelle
La hauteur de ligne est visiblement un problème et notre “rétrécissement” est allé trop loin car notre police de base est plus grande et plus aérée que celle de Stack Overflow.
Je soutiens tout à fait la suppression du gras dans notre expérience actuelle et l’augmentation de la taille, de la hauteur de ligne.
Ce PR a apporté les modifications suivantes : https://github.com/discourse-org/design-experiments/pull/77
C’est excellent, Jordan. Dans ce cas, je pense que l’utilisation d’une graisse de police cohérente améliore la lisibilité. J’aime aussi l’augmentation du padding.
Merci, je suis d’accord. Je pense que j’aimerais aussi examiner les couleurs et pourquoi hljs utilise les couleurs qu’il utilise. Je n’ai vu ce schéma de couleurs utilisé nulle part en ligne.
J’aime les changements de typographie, mais je trouve que le fond sombre est excessif. Le fond plus clair est beaucoup plus facile à lire.
Changement entrant.
Après plus de recherches, je constate que les couleurs que nous utilisons sont basées sur un schéma obsolète utilisé par github il y a peut-être 10 ans, ou aussi peu que 4 ans.
Y a-t-il une possibilité de changer les couleurs par défaut pour quelque chose de plus récent ?
Github a un schéma de couleurs mis à jour depuis lors, ainsi que d’autres options pour être un schéma clair par défaut.
Stack Overflow
Atom One Light
Nouveau Github
hljs par défaut 
Ma préférence personnelle irait vers quelque chose avec des couleurs plus sobres - dans vos exemples, Stack Overflow est mon choix.
après quelques jours, je dois encore plisser les yeux avec la petite taille de la police, je ne pense pas que cela vaille la peine d’économiser de l’espace.
Ressentez-vous la même chose sur Stack Overflow (par exemple) ? Les calculs de taille de police et d’interlignage sont maintenant les mêmes entre Discourse et SO.
max-height sur Discourse est légèrement inférieur à 500px contre 600px.
Le contraste est bien pire dans notre cas et cela fait une grande différence lorsque vous essayez de lire du petit texte, par exemple (Stack Overflow à droite) :
Oui, je vois ce que vous voulez dire.
Que pensez-vous de ces changements dans la PR que j’ai ouverte : https://github.com/discourse-org/design-experiments/pull/79
Voici une option où j’ajoute du noir à l’arrière-plan en mode sombre, au lieu d’utiliser quelque chose basé sur le secondaire ou le primaire. Je le fais via rgba(0,0,0,0.25)
Quelqu’un pourrait-il faire un test avec le récent composant/thème de numérotation des lignes de blocs de code également inclus ? Merci d’avance.
