The discussion revolves around Improved code block sizing & color scheme. fitzy initiated the conversation by sharing an experiment to improve code block readability, specifically for large blocks of code. The proposed changes include reducing text size, increasing line height, and modifying code block heights.
awesomerobot pointed out an unintentional side-effect of changing inline code font size, which fitzy agreed to modify. Lilly shared a custom CSS solution to achieve similar results.
sam expressed concerns that the changes might negatively impact shorter code snippets, suggesting that the modifications should only apply to very long code blocks. jordan-vidrine compared the current experiment to Stack Overflow’s code block display, noting differences in font size, bolding, and line height.
The conversation led to several updates, including a PR by jordan-vidrine to address concerns and improve code block readability. CvX suggested that the smaller font size might not be worth the space savings and recommended updating inline code styling for better consistency.
Later, jordan-vidrine proposed changing the default code block colors to a more modern scheme, similar to GitHub’s updated colors or Stack Overflow’s color scheme. fitzy preferred a more muted color scheme, such as Stack Overflow’s.
The discussion concluded with jordan-vidrine merging the changes into the core code and Tris20 expressing enthusiasm for the updates, which have improved code block readability.
We’re experimenting with reducing the size of text and the line height, and increasing the height of code blocks, in order to improve readability of larger blocks of code. This is mostly problematic for large blocks of code exceeding 20 or more lines. The result is more code can be seen in the regular viewport.
Before
After
The change has been made here:
It seems like changing the font size of inline code like this is probably an unintentional side-effect?
Yes that was unintentional, we should modify it so that only full blocks are changed and not inline code.
FWIW, I just use this on my hackity hack dev instance:
pre code {
font-size: var(--font-down-1);
}
result
I’ve sent a PR to remove styling changes to inline monospace text, and also increase the line height slightly in <pre> blocks.
This is sadly hurting readability on shorter snippets.
Eg:
Font is smaller, line height shorter.
Can this only impact very long code blocks? Should this even be a core change @jordan.vidrine ?
I want to also highlight the difference here between this experiment and stack overflow.
Current experiment
Stack overflow
Some things I notice immediately is:
I need to dig more into hljs and see why our use case is bolding titles.
I love that you had a look at Stack Oveflow, cause if anyone figured out how to display code blocks it would be them.
Another observation, font size does not appear to be changing despite it changing… (15px → 13px but the colors compensate some)
Visual rhythm and line height all feel a lot better here:
Stack Overflow
Current Experiment
Line height is noticeably a problem and our “shrinking” went too far cause our base font is larger and roomier than Stack Oveflow.
I very much support de-bolding in our current experiment and increasing size, line height.
This PR made the following changes: https://github.com/discourse-org/design-experiments/pull/77
That looks great, Jordan. In this case, I think using the consistent font weight helps readability. I’m liking the increased padding too.
Thanks, I agree. I think I’d like to also take a look at colors and why hljs is using the colors it is using. I havent seen this color pattern used anywhere online.
I am a fan of the typography changes, but I feel the dark background is too much. The lighter background is a lot easier to read.
Change incoming.
After more research, I see that the colors we are using are based on a dated scheme used by github possibly 10 years ago, or as early as 4.
Is there room here to change the default colors to something updated?
Github has an updated color scheme since then, along with other options to be a default light scheme.
Stack overflow
Atom One Light
New Github
hljs default 
My personal preference would be toward something with more muted colours - in your examples, Stack Overflow is my choice.
after a couple days I still have to squint a bit with the smaller font-size, I don’t think it’s worth the space savings
Do you feel the same on Stack Overflow (for example)? The font size and line height calculations is the same now between Discourse and SO.
max-height on Discourse is slightly less at 500px vs 600px.
The contrast is much worse in our case and it makes a big difference when you’re trying to read small text, for example (Stack Overflow on the right):
Yeah I see what you mean here.
How do you feel about these changes in the PR I have up: https://github.com/discourse-org/design-experiments/pull/79
Here is an option where I add black to the bg in dark mode, instead of using something based on secondary or primary. I do this via rgba(0,0,0,0.25)
Could someone do a test with the recent code block line numbering component/theme feature also included? TIA.
