Every once in a while I come across a friend’s blog post where they’re writing some code that just doesn’t look pretty on mobile. Here’s an example from a recent post on this blog:

The way the text wraps around just looks yucky to me. Thankfully there’s a solution! Make it possible for your code blocks to scroll from side to side by adding the following to your CSS:

pre code {
  overflow: auto;
  word-wrap: normal;
  white-space: pre;
}

Then gaze upon the resulting beauty: