Styling in­line code

When I was work­ing on my site's new ver­sion, I tried to think more about how every­thing should look and read ty­pog­ra­phy-wise. And one of the things I al­ways had prob­lems with was how to style in­line code blocks. Most of the time we can see small col­or­ful rec­tan­gles in place of them. And the more you put those things in­side your text, the worse the read­ing ex­pe­ri­ence be­comes.

This ex­am­ple is taken from a Wikipedia ar­ti­cle on CSS. Look at all those col­or­ful rec­tan­gles. Also, note how some of the things that could be in­line code blocks are not marked as such as they surely would in­tro­duce even more vi­sual clut­ter.
Screenshot from Wikipedia

What if that overused in­line code blocks' style is just re­dundant?

Al­most every­thing we see there is com­ing from how the proper mul­ti­line code blocks are of­ten pre­sented. But do we re­ally need all those styles in an in­line con­text?

Do we need mono­space font? Nope. Mono­space is use­ful when we have mul­ti­ple lines and need to align sym­bols in a nice way. But in­side a reg­u­lar text? We don't need it. Go away, mono­space font.

Do we need bor­ders and any back­ground color? Un­likely. When we have a big sin­gle code block they're ok, but those styles be­come too bright and eye-catch­ing in an in­line con­text. They make your in­line code blocks too bold, and it would worsen the text's read­abil­ity, as the eye would pay at­ten­tion to those bright spots be­fore you'll read the whole text.

Do we need syn­tax high­light­ing? I doubt it. It is use­ful when we have a lot of code and need to sep­a­rate some things from the other, but when we have only one or two words in­side out code blocks, the high­light­ing is just un­nec­es­sary and won't do any­thing ex­cept for get­ting more of our at­ten­tion to it.

My So­lution

So, if all those styles are re­dun­dant, or even harm­ful for our text, what should we use in­stead? Af­ter some thoughts about all those is­sues, I started to look into how peo­ple are styling sim­i­lar en­ti­ties in reg­u­lar books. When it comes to the non-ob­tru­sive way of em­pha­siz­ing some parts of the text the so­lu­tion is ob­vi­ous. Italic. And if it is use­ful for the reg­u­lar texts, why couldn't we use it for our in­line code blocks?

My ver­sion of the above ex­am­ple now reads bet­ter as a text. The bot­tom in­line code blocks, the ones with the whole CSS rules, were ac­tu­ally a bit bet­ter with the high­light­ing, so it would be pos­si­ble to rein­tro­duce it there, but not as brightly as it was be­fore.
Fixed screenshot from Wikipedia

Ac­tu­ally, you can look at an in­line code block right there (Here I used just an <em>, as this post could be seen on RSS-read­ers and in other places where you wouldn't have the proper code blocks' style like I used for my blog.): font-style: italic. I think that it look rather nice —un­ob­tru­sive, but sep­a­rate from the reg­u­lar text.

Italic sep­a­rates the code from the other text just fine, in most cases, you won't need any­thing else there. The eas­i­est way to make your in­line code blocks italic is some­thing like this:

:not(pre) > code {
    font: in­herit;
    font-style: italic;
}

This would make your in­line code blocks to look like a reg­u­lar italic text. Note the :not(pre) —if you'll mark your big code blocks us­ing <pre><code>, this se­lec­tor won't match them. Of course, if you're us­ing some kind of syn­tax high­lighter, you'll need to dis­able it (or over­ride its styles) for in­line code blocks. In some cases, when you're us­ing a dif­fer­ent web font for the italic, you'll need to spec­ify this too to not make a faux italic in­stead, of course.

There can be some cons for this so­lu­tion. For ex­am­ple, if you'd want to have some reg­u­lar em­pha­sis you'll have the same style for both it and in­line code blocks. But in most cases reader would know the dif­fer­ence from the con­text and it won't mat­ter much.

Yes, It's All Sub­jective

Italic for in­line code blocks can be, of course, un­usual. But I'm not say­ing that that's the only pos­si­ble so­lu­tion. Over­all, it is a mat­ter of style —how you would pre­sent your in­line code blocks. Some­times you'd want them to pop and bring reader's at­ten­tion. But if you'd want to have your texts with a lot of in­line code blocks to be more read­able —italic could help you.