Add space around code

[merkushin]

Fixes #168 #131

Changes proposed in this Pull Request

• Add some space around code

Testing instructions

• Add a code block with an underscore on the last line (it might be a single line of code) to a post
• Preview the post on Linux with Firefox (for me Ubuntu 20.04 and Firefox 90.0)

Screenshot / Video

Before:

After:

[renatho]

Hum. I think it's better for cases with a contrast color in the block and without line number (WP-admin > Settings > SyntaxHighlighter - Color Theme and Display line numbers settings).

But for the same color with line numbers (screenshots from the PR description), it seems very spaced.

Also, with contrast and line numbers, I think it seems a little weird:

Maybe we could add the space only when it doesn't have the line numbers. And for the other case, we could just add 1px in the top and bottom to fix the underline issue. WDYT?

[merkushin]

I think we can do even more straightforward: remove padding only on the left of the line.

Or do those spaces around the block look weird for you? 🤔

As an development of the idea of removing/adding padding:

• remove left padding for line numbers;
• remove left padding for code lines;
• add margin-right for line numbers;
• add padding for the whole .syntaxhighlighter.
  I think it is a more consistent way of adding padding.

However, it doesn't solve the problem with seemingly too large padding when the code and the page have the same background. But we can set padding to 0.5em for top&bottom:

The main problem here (from my perspective) is that we can't rely only on the theme of SyntaxHighlighter :-/ Otherwise, we could set different padding for different themes.

Aw, and I think 1px would look not so good in your example (I mean dark background for code and light background for the rest of the page, or vice versa). Better than #131 but too close to edges from my point of view.

Unfortunately, 1px is not enough to recognize underscore. Here is how it looks with 2px:

[renatho]

The spacings you added now look good to me! I just noticed that with the new approach, the title is misaligned (we can add it through the settings too).

I think the less we can change there would be better because the users can have CSS overriding some styles. So if we change less, there are less chances to break site customizations. :)

[merkushin]

Removed padding from caption.

Chrome Mac OS:

Firefox @ Ubuntu with line numbers:

Firefox @ Ubuntu without line numbers:

[renatho]

Cool! Looks good and works well!