Make markbind styles cumulative on top of bootstrap styles

[damithc]

v1.9.0

Example: Bootstrap allows <p class="lead"> some text </p> to be used to show leading text of an article in a different formatting.

This normally works in markbind, but as soon as we apply some markbind formatting on the text, it overrides the bootstrap formatting. e.g., <p class="lead"> **some** text </p> will show the text in normal formatting + bolding

Suggestion: in general, it's nice if our own styles such as bold/underline/tooltip etc. can be applied on top of styles applied by bootstrap.

[Chng-Zhi-Xuan]

It is actually possible to do so.

The issue comes in because rendering markdown content produces a <p> tag. Nested <p> tags are strictly not allowed in HTML specifications, and will terminate upon detecting a child element with a <p> tag.

The P element represents a paragraph. It cannot contain block-level elements (including P itself).

Before

<p class="lead">
  Lorem **Ipsum**
</p>

After

<p class="lead"></p>
<p>Lorem <strong>Ipsum</strong></p>

Recommend you explicitly use <md> to specify markdown content within a paragraph tag, which doesn't generate a <p> tag.

[damithc]

That worked. Thanks for the workaround. 👍
Is it necessary for markdown to add a <p> tag? Should we try to get rid of it?

[Chng-Zhi-Xuan]

It is there for cases where you have markdown content without any parent element, since it is not good to have stray text floating around in a HTML page. We should keep it as it helps us to ensure our pages are properly formatted.

Some info: Most markdown content is parsed through markdown-it's render method and it generates a <p> tag by design. While <md> uses markdown-it's renderInline that doesn't generate a <p> tag.

[damithc]

It is there for cases where you have markdown content without any parent element, since it is not good to have stray text floating around in a HTML page. We should keep it as it helps us to ensure our pages are properly formatted.

I guess it is not easy to restrain this 'add <p> everywhere' behavior to cases where it is actually needed? I suspect adding <p> tags can cause unexpected behavior in other places too.

[damithc]

This workaround can be documented as a 'how to'