I like writing tech-related blog posts (you’re reading one right now!). My posts often contain the <code> tag as I illustrate code examples. The default browser style for this tag can be pretty dull, typically using the system monospace font and a beige background colour. I’ve added my own custom style to this tag. This is a step-by-step explanation of it, as I’d rather do that than watch some drivel on Netflix today.

What does the code tag do?

<code> is used to semantically mark a short piece of code inline in HTML. Browsers normally display this with a monospace font. Read more about the tag on MDN.

<p>I often commit <code>console.log()</code> statements!</p>

I use Markdown to write my blog posts, and the Markdown equivalent to writing the tag is to use a single backtick:

I often commit `console.log()` statements!

<code> is different from the <pre> tag, which is used to display code blocks preformatted - that is, exactly how it appears in the HTML file, including whitespace. Here’s the MDN link. (In Markdown, <pre> tags are represented by three backticks.)

Another difference between <code> and <pre> tags is that <code> displays inline by default, while <pre> has a block display.

Styling the code tag

This is the style I use currently on this blog.

$color-code-background: #272822;
$color-code-color: #f8f8f2;

code {
    background-color: $color-code-background;
    color: $color-code-color;
    border-radius: 0.3em;
    padding: 4px 5px 6px;
    white-space: nowrap;
}

Let’s go through this line-by-line.

I use Sass to write CSS, and I like to assign colours to variables. The reasoning behind this is another blog post in itself, but briefly, my Sass linter tells me too, and they are ultimately easier to maintain and keep track of.

The choice of colours is influenced by my overall blog styling. My blog has an almost-white background colour, so the code tag background should also be dark in order to create a strong colour contrast. The text itself then needs to contrast with the dark background to be readable. It’s a good idea to use a colour contrast checker to check how accessible your colour choices are. (This one from WebAIM is great.)

The specific colour choices were influenced by my code block styles. I use Prism on my blog for code formatting, but Prism does not highlight inline code tags (hence why I’m styling them myself). I’ve copied the colours from the Okaidia theme, which is what I use.

The border-radius was also copied from the Prism <pre> styles.

The padding values were what I thought looked good on my page. This is dependent on the font-size and line-height of your text. I suggest playing around with this until you think it sits well alongside your other text. Make use of the padding shorthand here if values are duplicated.

Finally, I added white-space: nowrap so that if the code block had spaces in it, it wouldn’t wrap onto the next line, as it makes the text less readable to split on whitespace.

Caution ⚠️

The Prism code formatter creates <code> blocks within <pre> blocks, so the white-space rule I use breaks the carriage returns (it makes everything sit on one huge long line). In order to avoid this, either overwrite your new style with a pre code rule:

pre code {
    white-space: pre;
}

Or instead of applying the style to a tag, target a class instead, like .code. However, if you’re using Markdown to generate your HTML, you’ll need to start writing <code class=“code”> instead of using the backticks shortcut, which may become tedious.

Anyway, it’s always fun to overthink styles. Here’s a CodePen demonstrating this style interactively.