Request: Do not discard blank lines below a panel

[damithc]

Current:

<panel ...>
....
</panel>


# abc

The above code renders the abc right below the panel, no matter how many blank lines are in between the panel and the heading.

Suggested: Do not strip away the blank lines. Parse them as normal Markdown instead, in which case one or more blank lines should be rendered as a new paragraph.

[acjh]

I believe it's stripped away because it's parsed as Markdown.

[damithc]

I believe it's stripped away because it's parsed as Markdown.

Probably. Our documentation says a 1 or more blank line is rendered as a new paragraph. And we seem to honor that promise in other places, but not below a panel.

[acjh]

2 lines separated by 1 or more blank lines are rendered as separate paragraphs. Isn't abc a paragraph of its own?

The blank line is never converted into an empty paragraph, if that's what you think it does.

[damithc]

I didn't look at the code itself. The issue is based on my observation that I cannot get a visual separation between the panel and the content below by adding blank lines.

Perhaps this is simply a case related to bottom padding of the panel rather than the paragraph rendering?

[yamgent]

Perhaps this is simply a case related to bottom padding of the panel rather than the paragraph rendering?

Looks like it, currently we don't provide any space between a panel and a paragraph after it (margin-bottom is 0):

Panel.vue:

    .expandable-card {
        margin-bottom: 0 !important;
        margin-top: 5px;
    }

[damithc]

0 padding makses sense when there are multiple consecutive panels though.

[acjh]

We can't specify last-of-class: CSS last-child selector: select last-element of specific class, not last child inside of parent?

A workaround is to add it to the subsequent non-panel:

.card-container + :not(.card-container) {
    margin-top: .5rem;
}

This is bad as it overrides the margin for that other content.

I propose allowing the user to specify a class on the inner .card. See https://github.com/MarkBind/markbind/pull/690#discussion_r257503977.

[damithc]

Alternatively, can we give an easy way to add vertical spacing anywhere in the page? e.g., each pair of consecutive blank lines will convert into one blank line in the rendered page.

[acjh]

e.g., each pair of consecutive blank lines will convert into one blank line in the rendered page.

That's probably not a good idea.

1. It's against Markdown standard.
2. HTML treats multiple consecutive whitespace as a single whitespace anyway, unless wrapped in <pre> tags or using CSS pre — both of which affect formatting.

You can try on GitHub.

Alternatively, can we give an easy way to add vertical spacing anywhere in the page?

There's <br/>. 🙈

[damithc]

There's <br/>. 🙈

Indeed. That's what I have been using before (or <p/>). I felt like visual blank lines is a better match with the intention (i.e., it's more WYSIWYG). When you look at the code, <br/> is just another tag, and we have many such tags in the code. They all look the same. On the other hand, a few blank lines immediately register in the author's mind as vertical blank space.

But it is a problem that such a feature will contradict Markdown standard.

[acjh]

Need to check where we convert Markdown to HTML, but I suppose we can implement a plugin that converts n=3 or more newlines to (n-2) <br/> tags. i.e.:

<panel>
  ...
</panel>


abc

becomes

<panel>
  ...
</panel>
<br/>

abc

Highly likely to cause other problems though.

[damithc]

Highly likely to cause other problems though.

yes, blank lines can mean too many different things.

A middle ground could be to use something like \n|\n to mean a vertical whitespace. e.g.,

</panel>

|

# Some title

But this is not urgent. For the time being I think using a <br> below a panel is the easiest option I guess.

---

A totally different alternative is to add some bottom padding to panels by default but give a way to get rid of that when the panels are consecutive. e.g.,

<panel-set>
<panel>
    ...
</panel>
<panel>
    ...
</panel>
</panel-set>

Not sure if this is feasible to implement though.