# Improved code block sizing & color scheme
**URL:** https://meta.discourse.org/t/improved-code-block-sizing-color-scheme/333946
**Category:** UX
**Tags:** feedback, design-experiment
**Created:** [November 1, 2024, 3:10am UTC](https://meta.discourse.org/t/improved-code-block-sizing-color-scheme/333946 "2024-11-01T03:10:30Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@fitzy](https://meta.discourse.org/u/fitzy)
#### Post date: [November 1, 2024, 3:10am UTC](https://meta.discourse.org/t/improved-code-block-sizing-color-scheme/333946/1 "2024-11-01T03:10:30Z")
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](https://github.com/discourse-org/design-experiments/pull/75)
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [November 1, 2024, 3:36pm UTC](https://meta.discourse.org/t/improved-code-block-sizing-color-scheme/333946/2 "2024-11-01T15:36:38Z")
It seems like changing the font size of `inline code like this` is probably an unintentional side-effect?
---
### Author:  [@fitzy](https://meta.discourse.org/u/fitzy)
#### Post date: [November 1, 2024, 7:44pm UTC](https://meta.discourse.org/t/improved-code-block-sizing-color-scheme/333946/3 "2024-11-01T19:44:49Z")
Yes that was unintentional, we should modify it so that only full blocks are changed and not inline code.
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [November 3, 2024, 6:12pm UTC](https://meta.discourse.org/t/improved-code-block-sizing-color-scheme/333946/4 "2024-11-03T18:12:13Z")
FWIW, I just use this on my hackity hack dev instance:
```scss
pre code {
font-size: var(--font-down-1);
}
```
result
---
### Author:  [@fitzy](https://meta.discourse.org/u/fitzy)
#### Post date: [November 3, 2024, 10:10pm UTC](https://meta.discourse.org/t/improved-code-block-sizing-color-scheme/333946/5 "2024-11-03T22:10:09Z")
I’ve sent a PR to remove styling changes to inline monospace text, and also increase the line height slightly in `` blocks.
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [November 4, 2024, 12:59am UTC](https://meta.discourse.org/t/improved-code-block-sizing-color-scheme/333946/6 "2024-11-04T00:59:21Z")
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 ?
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [November 5, 2024, 7:08pm UTC](https://meta.discourse.org/t/improved-code-block-sizing-color-scheme/333946/8 "2024-11-05T19:08:16Z")
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.
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [November 5, 2024, 8:36pm UTC](https://meta.discourse.org/t/improved-code-block-sizing-color-scheme/333946/9 "2024-11-05T20:36:19Z")
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.
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [November 5, 2024, 9:31pm UTC](https://meta.discourse.org/t/improved-code-block-sizing-color-scheme/333946/10 "2024-11-05T21:31:54Z")
This PR made the following changes: [https://github.com/discourse-org/design-experiments/pull/77](https://github.com/discourse-org/design-experiments/pull/77)
| Before | After |
| --- | --- |
|  |  |
|  |  |
|  |  |
---
### Author:  [@bryce](https://meta.discourse.org/u/bryce)
#### Post date: [November 5, 2024, 9:52pm UTC](https://meta.discourse.org/t/improved-code-block-sizing-color-scheme/333946/11 "2024-11-05T21:52:00Z")
That looks great, Jordan. In this case, I think using the consistent font weight helps readability. I’m liking the increased padding too.
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [November 5, 2024, 9:57pm UTC](https://meta.discourse.org/t/improved-code-block-sizing-color-scheme/333946/12 "2024-11-05T21:57:55Z")
> [@bryce](#):
>
> I think using the consistent font weight helps readability.
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.
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [November 5, 2024, 11:19pm UTC](https://meta.discourse.org/t/improved-code-block-sizing-color-scheme/333946/13 "2024-11-05T23:19:04Z")
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.
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [November 5, 2024, 11:29pm UTC](https://meta.discourse.org/t/improved-code-block-sizing-color-scheme/333946/14 "2024-11-05T23:29:41Z")
Change incoming.
[https://github.com/discourse-org/design-experiments/pull/78](https://github.com/discourse-org/design-experiments/pull/78)
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [November 6, 2024, 12:36am UTC](https://meta.discourse.org/t/improved-code-block-sizing-color-scheme/333946/15 "2024-11-06T00:36:03Z")
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** 🤢
---
### Author:  [@fitzy](https://meta.discourse.org/u/fitzy)
#### Post date: [November 6, 2024, 12:39am UTC](https://meta.discourse.org/t/improved-code-block-sizing-color-scheme/333946/16 "2024-11-06T00:39:04Z")
My personal preference would be toward something with more muted colours - in your examples, Stack Overflow is my choice.
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [November 6, 2024, 10:22pm UTC](https://meta.discourse.org/t/improved-code-block-sizing-color-scheme/333946/17 "2024-11-06T22:22:26Z")
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
---
### Author:  [@fitzy](https://meta.discourse.org/u/fitzy)
#### Post date: [November 6, 2024, 10:28pm UTC](https://meta.discourse.org/t/improved-code-block-sizing-color-scheme/333946/18 "2024-11-06T22:28:16Z")
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.
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [November 6, 2024, 11:05pm UTC](https://meta.discourse.org/t/improved-code-block-sizing-color-scheme/333946/19 "2024-11-06T23:05:45Z")
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):
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [November 6, 2024, 11:14pm UTC](https://meta.discourse.org/t/improved-code-block-sizing-color-scheme/333946/20 "2024-11-06T23:14:49Z")
> [@awesomerobot](#):
>
> 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](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)`
---
### Author:  [@robbie.morrison](https://meta.discourse.org/u/robbie.morrison)
#### Post date: [November 7, 2024, 10:22am UTC](https://meta.discourse.org/t/improved-code-block-sizing-color-scheme/333946/21 "2024-11-07T10:22:06Z")
Could someone do a test with the recent code block line numbering component/theme feature also included? TIA.
[Next page](https://meta.discourse.org/t/improved-code-block-sizing-color-scheme/333946.md?page=2)