Before I forget, to get the nice horizontally-scolling code block in my previous post, I had to added the following to my wordpress theme’s style.css:

.hentry code {
  display: block;
  background: lightgrey;
  padding: 10px;
  overflow: auto;
}

Then I can get the nice boxes by surrounding code snippets with both pre and code blocks. pre gets me monospaced font, a theme-consistent font size, etc. code gets me the scrolling and the grey background.

Oh, I did also comment out the “letter-spacing: -1px;” from my theme’s pre definition, it made the code look squished.

Got pointed in the right direction by these two sites.

Since I will not be able to remember in the future: wp-content/themes/clean-home/style.css