Improved code block sizing & color scheme

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:

https://github.com/discourse-org/design-experiments/pull/75

13 Likes

It seems like changing the font size of inline code like this is probably an unintentional side-effect?

4 Likes

Yes that was unintentional, we should modify it so that only full blocks are changed and not inline code.

2 Likes

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.

2 Likes

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 ?

5 Likes

I want to also highlight the difference here between this experiment and stack overflow.

Current experiment

Stack overflow

Some things I notice immediately is:

  • their font is slightly larger
  • we have bold on our function titles, they do not

I need to dig more into hljs and see why our use case is bolding titles.

1 Like

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.

2 Likes

This PR made the following changes: https://github.com/discourse-org/design-experiments/pull/77

2 Likes

That looks great, Jordan. In this case, I think using the consistent font weight helps readability. I’m liking the increased padding too.

2 Likes

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.

1 Like

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.

2 Likes

Change incoming.

https://github.com/discourse-org/design-experiments/pull/78

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 :nauseated_face:

4 Likes

My personal preference would be toward something with more muted colours - in your examples, Stack Overflow is my choice.

3 Likes

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

1 Like

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.

2 Likes

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):

1 Like

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)

2 Likes