This puts one character's worth of padding inside each pre block, making the text inside easier to read. It also changes the margin to match the spacing of paragraphs, ensuring that everything is aligned "on the line" as if it is displayed in a terminal.
Fixes 2 issues:
1. In Firefox, overflow: scroll puts an ugly unscrollable scrollbar on the page. With auto it behaves as normal but the scrollbar only appears when needed.
2. When using code highlighting, the generated Hugo styles replace the <pre> background color, making the page look ugly (only the text has a background, not the entire <pre> block). Setting the background !important fixes this. This is not ideal, but the styles are applied directly to the element when using the internal highlight shortcode, so this is the only way to override them.
Tested on Firefox and Chrome.
CSS outline has issues with Firefox in several situations involving child elements with negative margins. Changing to box-shadow fixes this. Tested on Chrome and Firefox.
Joe Roe
mntn
mntn