Phantom blank lines are added at the end of the code blocks

[jscarle]

If you take a look at this post on my blog, you'll see various instances of extra blank lines at the end of various code blocks. There's not from my input. I have deleted the code blocks, went into Notepad++ with all symbols shown, verified that I had no extra blank lines, and recreated the code block and those lines still appear.

The worse instance is the benchmark at the end which even adds not 1, but 2 blank lines.

Running version 3.7.0 of SyntaxHighlighter Evolved.

My settings:

The override CSS class:

.syntaxhighlighter.override a,
.syntaxhighlighter.override div,
.syntaxhighlighter.override code,
.syntaxhighlighter.override table,
.syntaxhighlighter.override table td,
.syntaxhighlighter.override table tr,
.syntaxhighlighter.override table tbody,
.syntaxhighlighter.override table thead,
.syntaxhighlighter.override table caption,
.syntaxhighlighter.override textarea {
  font-size: 0.94em !important;
}

Running WordPress 6.4.3 with the Twenty Nineteen theme.

[jscarle]

I just realised that it's not adding blank lines, its my CSS that doesn't work properly. The line-height gets computed differently for the gutter vs the code.

[jscarle]

I'm going to add this to the issue in case anyone ever comes across this one day.

The fix was to add .syntaxhighlighter.override to the list of classes.

Thus, this:

.syntaxhighlighter.override,
.syntaxhighlighter.override a,
.syntaxhighlighter.override div,
.syntaxhighlighter.override code,
.syntaxhighlighter.override table,
.syntaxhighlighter.override table td,
.syntaxhighlighter.override table tr,
.syntaxhighlighter.override table tbody,
.syntaxhighlighter.override table thead,
.syntaxhighlighter.override table caption,
.syntaxhighlighter.override textarea {
  font-size: 0.67rem !important;
  line-height: 0.85rem !important;
}

Works consistently on both the gutter and the code.