Styling the colour of <pre><code> horizonal scrollbars

Despite the absence of a proper scrollbar colouring standard in Cascading Style Sheets (CSS), there is a way to colour the horizontal scrollbar in a <pre><code> block that will work in Edge, Safari, Firefox and Chrome.

Styling horizontal scrollbars on <pre><code> blocks where overflow-x is set to “auto” or “scroll” can be a challenge, especially when there is no universally accepted CSS standard for colouring scrollbars.

The following CSS code, which (unfortunately) contains a webkit vendor prefix, will ensure that the scrollbars are coloured as specified (in this case, with a bar colour of #201f23 and thumb colour of #777779). This will work in Mozilla Firefox, Microsoft Edge (Chromium), Google Chrome and Apple Safari.

pre code {
 display: block;
 overflow-x: auto;
 word-wrap: break-word;
 word-break: break-all;
 --scrollbar: #201f23;
 --thumb: #777779;
 }
pre code::-webkit-scrollbar {
 width: 18px;
 }
pre code {
 scrollbar-color: var(--thumb) var(--scrollbar);
 }
pre code::-webkit-scrollbar-track {
 background: var(--scrollbar);
 }
pre code::-webkit-scrollbar-thumb {
 background-color: var(--thumb);
 border: 3px solid var(--scrollbar);
 }

# This last comment is included only to demonstrate the use of a horizontal scroll bar on the pre code text block when there is a large amount of text.

A real-world application is shown above.

You can also apply the styling to a web page’s main scroll bars by substituting pre code in the CSS for html.

WordPress 5.6 fix

With the release of WordPress 5.6, changes were made to the general styling of pre code blocks that will override local styling. If you are affected, add this to your CSS:

.wp-block-code code {
	white-space: unset !important;
}

Have Your Say

Δ