Icons in 'Presentation' components (e.g. box, panels, tabs) are not rendered properly

[jmestxr]

Please confirm that you have searched existing issues in the repo

Yes, I have searched the existing issues

Any related issues?

No response

Tell us about your environment

applicable for all

MarkBind version

5.1.0

Describe the bug and the steps to reproduce it

Icons in 'Presentation' components are not rendered properly with indentation. For example, the following block of code:

produces

Moreover, presence/absence of newlines also affect rendering. For example,

produces

but

produces

Expected behavior

Icons should be rendered properly in these components, regardless of indentation size/newlines.

Anything else?

No response

[damithc]

@jmestxr From what I know, MarkBind (due to the parser used) follows the Markdown rule that requires a blank line to separate Markdown text from other text (e.g., HTML text). Otherwise the text is not parsed an Markdown but treated as plain text (I think).

Even GitHub behave the same way e.g.,

<p>
**abc**
</p>

Output: **abc**

[jmestxr]

@damithc I see. Indentation may also cause text with icons to be parsed as plain text. Perhaps we could put a note in UG stating that per Markdown rule, a new line and no indentation should be included when including content in tabs/panels/boxes?

[damithc]

@damithc I see. Indentation may also cause text with icons to be parsed as plain text. Perhaps we could put a note in UG stating that per Markdown rule, a new line and no indentation should be included when including content in tabs/panels/boxes?

Yes @jmestxr, I think that is a good idea.

[tlylt]

@jmestxr we have a section here on this: https://markbind.org/userGuide/usingHtmlJavaScriptCss.html#markdown-in-html
but yes if the indentation is also important, we should highlight that. With that, we should probably add a dedicated section in https://markbind.org/userGuide/troubleshooting.html to highlight some common usage that may result in such error and how t o fix them

[damithc]

Keeping in mind that users will just read the section of the UG relevant to the component they want to use, perhaps we can do the following:

• adjust the code examples (such as the one below) to have a blank line in the expected places
• mention the need for a blank line in the UG section of each affected component (there will be duplication, but MarkBind can handle duplication using <inlcude .. >).

[yiwen101]

Hi, I would like to give this issue a try.