Syntax styling increases line spacing for individual lines

@daviwil

FWIW, I noticed that syntax highlighting (i.e. like this) slightly increases the line spacing for the lines where it’s present, which causes the lines in a paragraph to have varying line spacing. It’s mildly visually jarring. :slight_smile:

IMHO it would be good if the line spacing didn’t change, and also if the style were made to stand out slightly more than it does now; as it is, the color and typeface is similar enough that it doesn’t always stand out well. Maybe it would be good if the horizontal padding were increased a bit while decreasing the vertical margin, something like that.

Can’t confirm on mobile:

I don’t have a desktop browser available at the moment, but I also didn’t notice it there (neither on Firefox@Tumbleweed, nor on Firefox@Windows10). Could this be a local font issue? Can you please add a screenshot?

*EDIT*: Now that I have access on a desktop, I can confirm that on Firefox@Tumbleweed the lines with code have a bit more spacing to the next line. For me, that seems to be due to NotoSans+LiberationMono.

Here’s a quick test:

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Asperiores rem est vitae voluptatem consequatur sed dolore et. Possimus accusamus praesentium autem harum dolores in et praesentium. Nihil iusto id delectus aut earum commodi. Ut est maiores qui omnis officia adipisci. Et saepe aut rem amet dolorem eaque aliquid. Et est sit debitis autem voluptatibus suscipit sed placeat. Asperiores rem est vitae voluptatem consequatur sed dolore et. Possimus accusamus praesentium autem harum dolores in et praesentium. Nihil iusto id delectus aut earum commodi. Ut est maiores qui omnis officia adipisci. Et saepe aut rem amet dolorem eaque aliquid. Et est sit debitis autem voluptatibus suscipit sed placeat.

To see it yourself, write a new post, then select a region and mark it as code. You can see the next line moving just so slightly.

On Windows, this might not be visible due to NotoSans+Consolas (or Arial+Consolas), but I cannot check this before Saturday.

1 Like