Blog Site: Scrollable Code Snippets

Published: October 6, 2025

While working on the post about reusable headers and footers, I noticed that the code snippet in that post was too wide for the content box. Long lines were overflowing, which made it harder to read and disrupted the layout.

To fix this, I added a new <pre> style in style.css to enable horizontal scrolling. This ensures that any code snippet wider than the content box can scroll without breaking the layout. The scroll bar is styled to match the site's theme for a consistent look across browsers.

Another issue I noticed was that the paragraph following the code snippet looked too close. To improve readability, I added a margin-bottom for the code blocks and a margin-top when a code snippet follows a heading (h1, h2, h3). This keeps spacing consistent and separates the code visually.

Here’s a simplified snippet of the styling I added:

pre {
  background-color: #162032;
  color: #38bdf8;
  padding: 1rem 1.25rem;
  border-radius: 8px;
  overflow-x: auto; /* Enables horizontal scrolling so you can see a scroll bar if the content is wider than the box */
  margin-bottom: 2.5rem; /* Adds space after the code block */
}

h1 + pre,
h2 + pre,
h3 + pre {
  margin-top: 1.5rem; /* Adds space when code follows a heading */
}
            

I also styled the code visually, using a dark background with bright blue text for high contrast and readability, and rounded corners to match the site’s card style. Ensuring good contrast was a particular focus, so the code is easy to read against the background.