Extra space in blockquotes in Live Preview

[Jklein64]

When editing a blockquote with the Live Preview setting enabled, the theme inserts extra space between lines. Here's an example:

This is the original text.

This is me editing same text in a blockquote in the Live Preview. Note the extra space between each of the paragraph breaks.

This image shows the border boxes and content boxes of each of the quote elements. It's clear that the padding is the cause of the spacing issue. Note that there's an empty quote because two consecutive newlines separate paragraphs in quotes in markdown.

Despite this, the reader view handles the rendering fine.

I spent some time trying to modify the CSS to fix this, but it's actually quite difficult. When in the live preview, each line within the quote is a <div> with class HyperMD-quote (among others) on the same level as the rest of the page's elements. In order to add spacing at the top and bottom of the quote, the theme currently adds padding to each of the quote elements, which affects the inside ones as well.

Ideally, what would happen in the Live Preview mode is the first element of each section of consecutive .HyperMD-quote elements would have padding on the top, and the last element of each consecutive chunk would have padding on the bottom. I've written a CSS snippet to remove the top/bottom padding from all of the quote elements and then only add top padding to the first of each consecutive block, but I can't figure out how to do it for the last quote element, making the quote look off-balance.

/* remove top/bottom padding for interior quote elements */
.HyperMD-quote {
    padding: 0 var(--scale-2-6) !important;
}

/* add top padding for the first quote element */
:not(.HyperMD-quote) + .HyperMD-quote {
    padding: var(--scale-2-6) var(--scale-2-6) 0 var(--scale-2-6) !important;
}

This fixes the spacing issue, but doesn't allow for the bottom-most quote element to be padded, which looks weird.

Any ideas?

[huyz]

I get the same issue. It's not pretty

[huyz]

Oh here's a workaround: add > [!QUOTE] before the blockquote. When the cursor is inside the blockquote, the extra lines will still show. But at least when the cursor is out, the rendering will look correct.

[vitamickey]

Having the same issue as y'all. Adding [!QUOTE] turns it into a callout, so the text on the first line becomes the title of the callout. It's an alright workaround, but would be nice to just fix it with another CSS workaround, to maintain the blockquote environment.