[site feedback] improved stying for inline code

Request Feedback
1

With the current discourse site styling, it’s difficult to distinguish inline code from the rest of the text. Example:

05 PM
05 PM1424×186 45.4 KB

It would be helpful if we could do something similar to what github does in visually distinguishing the inline code blocks. Example of the same text on github:

58 PM
58 PM1354×234 47.4 KB

For reference, github uses the following styles for inline code:

{
    padding: 0.2em 0.4em;
    margin: 0;
    font-size: 85%;
    background-color: rgba(27,31,35,0.05);
    border-radius: 3px;
}
3 Likes
2

That’s a great idea! There’s no reason we have to keep it the default.

Would you mind suggesting something that could work? Your reference looks ok, but gets really small.

Here’s a sample: the quick brown fox(1) jumped over the lazy(3) brown dogs.

image

3

I’m not sure what the “really small” refers to… the screenshot you posted looks good to me.

Here’s an arbitrarily modified version with a lighter color that maybe better matches the existing code block style?

p > code, li > code, pre > code {
    color: #333;
    background: #eeeeee;
    font-size: 85%;
    margin: 0;
    padding: 0.2em 0.4em;
    border-radius: 2px;
}
4

ah, oops. It was also at retina resolution. 85% makes it 11.9pt, which is a little too small to be accessible.

Though, truth be told, I’d like to bump it up to 14 or 18pt minimum. There’s no reason it needs to be so small with the amount of horizontal space this design has.

I’ll add your style now, and we can bump up the size later.