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, asking:
When reading a code block in your chosen viewing mode (light or dark), which of these should the code block always do?
Although the poll got only 139 votes over its twenty-four-hour life, it had roughly these percentages from the beginning:
| Response | Result |
|---|---|
| Match my chosen mode | 79.9% |
| Have a dark background | 20.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.
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. ↩︎
The links’ appearance comes into play with inline code (e.g.,
a link to theHugo website) rather than code blocks, but — again — I was under the hood, anyway, and figured I might as well handle that stuff, too. ↩︎
Latest commit (a884c349) for page file:
2023-07-18 at 1:39:56 PM CDT.
Page history