Shortcode in p tag all on one line loses the p tag

support
1

Code: GitHub - willfaught/paige at ff21e2480a94fa6df7a591dd47e08495133f2ab1

Run and view: http://localhost:1313

The p tag wraps the image.

Apply this diff:

diff --git a/exampleSite/content/_index.md b/exampleSite/content/_index.md
index d5d5a84..ae8bebc 100644
--- a/exampleSite/content/_index.md
+++ b/exampleSite/content/_index.md
@@ -13,9 +13,7 @@ paige:
 title: "Paige"
 ---
 
-<p>
-{{< paige/image alt="Landscape" breakpoints=true class="object-fit-cover rounded-4" fetchpriority="high" height="20rem" loading="eager" process="webp" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" width="100%" >}}
-</p>
+<p>{{< paige/image alt="Landscape" breakpoints=true class="object-fit-cover rounded-4" fetchpriority="high" height="20rem" loading="eager" process="webp" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" width="100%" >}}</p>
 
 <p class="display-5 fw-bold h2 text-center">An advanced Hugo theme</p>

Refresh http://localhost:1313

The p tag is missing.

2

Why do you have all that HTML code in a content markdown file?

1 Like
3

Given this site configuration:

[markup.goldmark.renderer]
unsafe = true

And this shortcode (layouts/shortcodes/sc.html):

aaa
Markdown Rendered
<p>
{{% sc %}}
</p>		 <p>aaa</p>
<p>
{{< sc >}}
</p>		 <p>aaa</p>
<p>{{% sc %}}</p> <p>aaa</p>
<p>{{< sc >}}</p> aaa

Why is the last one different?

When you call a shortcode using the {{< >}} notation, we replace the shortcode with a placeholder (a short string without whitespace) before sending the content to the markdown render (Goldmark). When we get the rendered content back from Goldmark, we replace the placeholder with the rendered shortcode.

In the last example above, when we get this back from Goldmark…

<p>HAHAHUGOSHORTCODE-s0-HBHB</p>

…we strip the wrapping p tags:

This produces valid and desired HTML for non-phrasing content such as aside, blockquote, details, div, footer, h1-h6, header, hr, main, nav, ol, p, pre, section, ul and others.

But when we strip the p tags, we don’t know if they are wrapping non-phrasing content or something else; the placeholder has not been replaced yet.

1 Like
4

Why do you have all that HTML code in a content markdown file?

@frjo It’s the home page, so it has a complicated design. In this case, a hero. Is that unusual? Every other page is mostly plain Markdown.

But when we strip the p tags, we don’t know if they are wrapping non-phrasing content or something else; the placeholder has not been replaced yet.

@jmooring Would using % avoid that issue?

5

Yes. See my examples above.

6

HTML goes in to template files and markdown in to content files, as a general rule.

I find it a lot easier to maintain a site over the years if this separation is strict.

2 Likes
7

HTML goes in to template files and markdown in to content files, as a general rule.

I see what you mean. I used to have a special home layout, but then you had to specify the text and image options in front matter, and it was much too complicated. Better to let users make their own layouts or raw HTML for the home page. This way, the default behavior is a normal, straightforward page.

8

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.