Code, meet mode

As part of a site touchup, I bow to popular wishes and make code blocks look friendlier.


Latest commit: 42d741f1, 2023-01-25
385 words • Reading time: 2 minutes

If you include code blocks in your website content, as I often do here, do you style them to meet your visitors’ preferences? Oh, you say you don’t know what those preferences are? Well, don’t feel too bad; neither did I, until a couple of days ago.

Recently, I decided to make some stylistic changes to this site; and it occurred to me that, while at it, I should think about how I presented code blocks herein. Up to then, I’d relied mostly on a Chroma stylesheet auto-generated by Hugo.

The only thing about doing that, however, is that you first have to select from a styles gallery; and I’d always opted for styles with dark-mode code blocks.1 In other words, the code blocks were light-shaded text on dark-background blocks, even though the site’s CSS automatically makes everything else here conform to the visitor’s chosen display mode, light or dark. Since I see a lot of this sort of thing on many other websites, I didn’t worry too much about it — or, at least, I didn’t until I got curious and wondered what others out there might like to see.

That’s why, this past Saturday on Mastodon, I posted a poll about the subject. Although it got only 139 votes over its twenty-four-hour life, it had roughly these percentages from the beginning:

Match my chosen mode79.9%
Have a dark background20.1%
Have a light background‌[Zero]

These results made it pretty clear to me what I should do.

Thus, the appearance of the site’s code blocks, like that of pretty much every other element herein, now matches your chosen display mode. Also: to confirm the results met accessibility guidelines, I used WebAIM’s online tools for checking the contrast of both text and links.2

My code always has its flaws but, from here on, perhaps at least it will be pleasant to view.

  1. This situation isn’t markedly different when I’m maintaining the site with Eleventy, during which time I use styling based on one of numerous themes available from the Prism.js website↩︎

  2. The links’ appearance comes into play with inline code (e.g., a link to the Hugo website) rather than code blocks, but — again — I was under the hood, anyway, and figured I might as well handle that stuff, too. ↩︎

Previous: Sorta scoped styling in Hugo, take two