Add highlight to inline code

[lex111]

Usually, inline code elements are highlighted with light gray background. This increases the text readability, especially when there are lot of inline codes.

Just compare.

Before:

After:

[lex111]

One more argument to add background for inline code - possessive case is not visible (someone might take it as a mistake, for example).

[tunetheweb]

Can you check how this looks on the Methodology page? That was why we didn’t add this in #1574 (comment)

[tunetheweb]

One more argument to add background for inline code - possessive case is not visible (someone might take it as a mistake, for example).

I presume this is one of the unedited chapters (CSS?). That should be picked up in editing.

You seem to have a good eye for these things so join us on #1432 if you like? Never enough editors! Process is here to give you some idea: https://github.com/HTTPArchive/almanac.httparchive.org/wiki/Editors'-Guide

[lex111]

Can you check how this looks on the Methodology page? That was why we didn’t add this in #1574 (comment)

Fixed, but the question is: what is the best color to use, #ebedf0 or #f8f8f8? I personally prefer the darker color (ebedf0).

I presume this is one of the unedited chapters (CSS?). That should be picked up in editing.

I'm actually not very good at this, but I'll look again, maybe I can help with new fixes.

[tunetheweb]

Fixed, but the question is: what is the best color to use, #ebedf0 or #f8f8f8? I personally prefer the darker color (ebedf0).

I prefer the second, more subtle one.

But can we come back to this one later? A lot going on at the moment and, while I think you do raise a good point, we need some time to think about this and don't think it's super critical at the moment since we had the current style for 2019 and ever since. Just wanna reduce change right now to those that need to happen.

Leave the PR open and promise to get back to you on this. And do thank you for submitting it!

[lex111]

No problem, I just think I'm not the only one who has a bit hard reading text with many inline code blocks. Therefore such a small stylization will mitigate it.

[rviscomi]

Same, I'm not good at design and would love to get other opinions, or see other examples of it in practice on popular sites. @lex111 do you have any examples you could point me to?

[lex111]

@rviscomi sure, you can open almost any docs site, and you see the inline code blocks visually differ from the rest of text.

Python docs https://docs.python.org/3/tutorial/datastructures.html#more-on-conditions

MDN https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Installable_PWAs

Web.dev https://web.dev/pl/semantics-and-screen-readers/

---

I would increase leading line spacing for paragraphs, just compare:

Current (1.5em)	Proposed (1.6em)

The proposed version is easier to read (perhaps this is just my personal feeling), but what do you think?

[rviscomi]

You've convinced me! I like the web.dev example the best because the background color is lighter, giving more contrast with the dark text, and I also like the subtle border. Increasing the paragraph line height also LGTM, curious to hear what @bazzadp thinks too.

Is there anything we need to do to handle line wrapping or multi-line code blocks?

[lex111]

Is there anything we need to do to handle line wrapping or multi-line code blocks?

What do you specifically mean? Inline code styling will not affect multi-line code blocks since I added background property reset (with none). Or do you want me to borrow the inline code styles from web.dev?

[tunetheweb]

Had a look now and LGTM!

@rviscomi let's leave the code block as is for now as separate and there's a Methodology impact as that code is in a different style.

[lex111]

@bazzadp so I can increase line spacing for paragraphs, as shown earlier example above, do I create PR for this?

[tunetheweb]

Ah sorry missed this. Too much going on. Yes open a separate PR for that, and also a slight border @rviscomi suggested?

Will test the line-spacing issue on ebook and stuff so maybe do as two PRs?