Two or more sequential lines of Markdown are one paragraph. So, without a blank line between the two shortcode calls, they’re encapsulated in a single paragraph element.
And that’s invalid, because details elements are block level elements (i.e., they cannot be placed within a paragraph element).
Two or more sequential lines of Markdown are one paragraph. So, without a blank line between the two shortcode calls, they’re encapsulated in a single paragraph element.
Yeah I understand that, BUT it seems chrome doesn’t parse the html in such manner?
See this screenshot in practice, the browser (chrome) parse it as there is a <p></p> after the paragraph, and another paragraph after the second <details>.
And that’s invalid, because details elements are block level elements (i.e., they cannot be placed within a paragraph element).
I guess this is the reason, but I don’t want it to be in a paragraph element in the first place (i.e. I originally want to simply write <details> tag but cannot because I haven’t enable unsafe. I wasn’t expect these details tag are in a paragraph). So isn’t trimming the whitespace before the details tag the solution to do so?
I’m porting my old blog from jekyll to hugo, the markdown file that having this issue have a bunch of details tag. I still want to avoid adding blank lines in my original markdown file because doing so will make it even more unreadable. I guess I might want to enable unsafe and keep using raw html tag instead of the details shortcode.
Thanks for the tip! I was using that shortcode comes with the official hugo build. Currently I choose to simply override the shortcode by putting my patched version to the website’s layout folder (layouts\shortcodes\details.html) so I could use my version that trims the unwanted whitespaces
Within the details shortcode you can remove all the whitespace you want, even reducing it to:
{{- .Inner -}}
But unless you add a blank line between the two shortcode calls, the rendered shortcodes will be wrapped within a paragraph. We’ve already had this conversation.
But unless you add a blank line between the two shortcode calls, the rendered shortcodes will be wrapped within a paragraph. We’ve already had this conversation.
Indeed, it will be wrapped in a pair of <p> tags, but for my own use-case, as long as the browser parse them as empty paragraph (which is the case), I can simply using p:empty css selector to make them hidden. Without the trimming, the browser makes the first (opening) <p> non-empty, which caused my original issue.
My old Jekyll site actually have a p:empty css rule that hides the empty <p></p> tag probably was workaround some jekyll issue (to far away I can’t remember why it was added). The css file is ported to my hugo site as-is so I only noticed the non-empty paragraph issue before and didn’t realize it wasn’t the root cause.
