Мы экспериментируем с уменьшением размера текста и высоты строки, а также с увеличением высоты блоков кода, чтобы улучшить читаемость больших фрагментов кода. Это в основном проблематично для больших блоков кода, состоящих из 20 и более строк. В результате в обычном окне просмотра можно увидеть больше кода.
До
После
Изменение внесено здесь:
Похоже, что изменение размера шрифта для inline кода, как здесь, вероятно, является непреднамеренным побочным эффектом?
Да, это было непреднамеренно. Мы должны изменить это так, чтобы изменялись только полные блоки, а не встроенный код.
Кстати, я просто использую это на своей тестовой среде для разработки:
pre code {
font-size: var(--font-down-1);
}
результат
Я отправил PR для удаления изменений стилей для встроенного моноширинного текста, а также для небольшого увеличения межстрочного интервала в блоках <pre>.
К сожалению, это ухудшает читаемость коротких фрагментов.
Например:
Шрифт меньше, межстрочный интервал короче.
Может ли это влиять только на очень длинные блоки кода? Стоит ли вообще вносить это как основное изменение @jordan.vidrine?
Хочу также подчеркнуть разницу между этим экспериментом и Stack Overflow.
Текущий эксперимент
Stack Overflow
Сразу бросаются в глаза следующие различия:
Мне нужно подробнее изучить hljs и выяснить, почему в нашем случае заголовки выделяются жирным шрифтом.
Отлично, что вы заглянули на Stack Overflow, ведь если кто-то и знает, как правильно отображать блоки кода, так это они.
Ещё одно наблюдение: размер шрифта, кажется, не меняется, хотя он изменился (15px → 13px), но цвета частично компенсируют это.
Визуальный ритм и межстрочный интервал здесь ощущаются гораздо лучше:
Stack Overflow
Текущий эксперимент
Межстрочный интервал явно является проблемой: наше «уменьшение» зашло слишком далеко, поскольку наш базовый шрифт крупнее и просторнее, чем на Stack Overflow.
Я полностью поддерживаю отказ от жирного начертания в нашем текущем эксперименте, а также увеличение размера шрифта и межстрочного интервала.
Этот PR внес следующие изменения: https://github.com/discourse-org/design-experiments/pull/77
Выглядит отлично, Джордан. В данном случае, я думаю, использование одинаковой толщины шрифта улучшает читаемость. Мне также нравится увеличенный отступ.
Спасибо, я согласен. Мне бы также хотелось взглянуть на цвета и понять, почему hljs использует именно эти цвета. Я нигде в интернете не встречал такой цветовой схемы.
Мне нравятся изменения в типографике, но я считаю, что тёмный фон слишком навязчив. Светлый фон гораздо легче читать.
Грядут изменения.
После дополнительных исследований я выяснил, что используемые нами цвета основаны на устаревшей схеме, которую GitHub применял, возможно, 10 лет назад, а может быть, и ещё раньше — 4 года назад.
Есть ли возможность изменить цвета по умолчанию на более современные?
С тех пор GitHub обновил цветовую схему и добавил другие варианты, включая светлую тему по умолчанию.
Stack Overflow
Atom One Light
Новый GitHub
hljs по умолчанию 
Мой личный выбор — что-то с более приглушёнными цветами. Из ваших примеров я бы выбрал Stack Overflow.
Прошло уже пару дней, но мне всё ещё приходится немного щуриться из-за меньшего размера шрифта. Не думаю, что это стоит экономии места.
Вы чувствуете то же самое на Stack Overflow (например)? Размер шрифта и расчеты межстрочного интервала теперь одинаковы между Discourse и SO.
max-height в Discourse немного меньше — 500 пикселей против 600 пикселей.
В нашем случае контрастность гораздо хуже, и это сильно влияет на читаемость мелкого текста, например (Stack Overflow справа):
Да, я понимаю, о чём вы.
Как вам эти изменения в моём PR: https://github.com/discourse-org/design-experiments/pull/79
Вот вариант, где я добавляю чёрный цвет к фону в тёмном режиме вместо использования вторичного или основного цвета. Я делаю это через rgba(0,0,0,0.25).
Не мог бы кто-нибудь протестировать недавнюю функцию нумерации строк в блоках кода, включая тему? Заранее спасибо.
