In Firefox, every code block appears to end with a blank line

[roryokane]

Problem

In every blog post with code blocks I’ve seen, for example this post about ln and this post about Rust crates, the code blocks end with a blank line when I view them in Firefox 81.

Ideally, the blank lines should not be there, because they look weird and force unnecessary scrolling.

In Google Chrome, these blank lines do not appear:

Looking for a solution

Not an HTML problem

The problem does not appear to be your HTML. This is the generated HTML of one of your code blocks:

<pre><code class="language-go">var theDude User = abides()

ln.Log(ctx, ln.Info(&quot;created new user&quot;), theDude)
</code></pre>

I wondered if the newline before the final </code> was the culprit, but based on viewing this JS Bin in Firefox using the style pre { background: #ddd; }, Firefox seems to ignore that newline, the same as Chrome.

Apparently a CSS ::after problem

The problem appears to be your CSS rules that create an ::after pseudo-element on your code elements. If I use the developer tools to comment out these two content: rules in the served file hack.css:

.hack pre code:after,
.hack pre code:before {
  /* content: ""; */
}

.hack code:after,
.hack code:before {
  /* content: "`"; */
  display: inline;
}

then the blank lines go away.