Should we highlight inline code?

(Stephanie Hobson) #1

GitHub and Stackoverflow and Discourse all put a background colour on their inline code.

Do you have thoughts about us doing that on MDN?

Here’s an example of how it might look:


(erosman) #2

There is a conflict between code and linked code which affects how aesthetically pleasing it appears :wink:

I think the inline code (not linked) could do with different colour, for example a very pale yellow/cream.

While I am a fan of minimalism, IMHO, a little colour can increase aesthetic interest.

(Chris Mills) #3

I appreciate the concern here, but I guess it just requires a bit of design consideration. I also really like highlighted code in body text — I think it looks nice, and it can also help make code terms more clearly seen.


Yes, I think we should. I have wanted this before, and I like the way the other sites you mention handle this. Thanks for thinking of it.

(Sphinx Knight) #5

This would definitely enhance the legibility: +1 for me :slight_smile:

(Shi) #6

I think this would be a nice thing to add.
Just a very light background, like you did in the picture would look good and make the code stand out just a little bit to make it better readable.
It makes bigger textblocks a bit more interesting for the eye. :slight_smile:

(Eric Shepherd) #7

Never. Never never never. When sites do this, the only words my eyes can read are the ones with the background shifted on them. Since we added this, I can’t read MDN at all. I’ve never understood why anyone finds this readable or helpful in any way.

This isn’t even hyperbole. I outright can’t read MDN now that we’ve done this. My eyes are not able to focus on the words that aren’t highlighted (and yes, even though it’s a light gray, it’s still a highlight to my eyes and brain). This is why I always bought new textbooks in college – to be sure there were no highlighted bits that would make pages unreadable. Cost a fortune but saved my grades, most likely.

It makes work very challenging when I can’t read the content I’m supposed to be working on updating… :frowning:


(Shi) #8

Maybe try it still a bit lighter. I see you matched the background-color to the one used in the code-boxes, what I would have done as a first, too.
I think in the textflow it is a bit too dark, especially in the yellow boxes it looks a bit off.
I think we must still find the best color for this, also I personally like it.
Only in the yellow boxes it really does not go well.

(Eric Shepherd) #9

So… I’m gradually getting more used to seeing this. I still don’t like it, per se, but I’m getting used to it. That said, I do have some remaining suggestions:

  • I still feel that the grey should be a little bit lighter. Just a little.
  • Actually, what I really think is that the grey should be the same, but with an alpha of 0.75 or so. This would both lighten it up a bit and would let it fit in better when <code> is used inside a note or warning box, by letting the grey take on a touch of the background hue.

I still may in the end use Stylish to remove the background color entirely, since it’s still distracting me unnecessarily, but I want to give it a fair shake first, and see if we can make some final adjustments that may let me grow to not mind it so much.

Eric Shepherd
Senior Technical Writer
MDN Web Docs: