Shortcodes and </p> tags (2)

[it-gro]

https://validator.w3.org shows errors like
No p element in scope but a p end tag seen.
on some of my pages

I’ve created a test site:
https://github.com/it-gro/HugoTestingShortcodeIllegalP

shortcode is just a placeholder dummy (with a div)
<div class="test" >test</div>

I see a nonconform </p> in the html on:

{{< dummy >}}
{{< dummy >}}

or
some text
{{< dummy >}}

or
{{< dummy >}}
more text

HTML look like e.g. this:

<p><div class="test" >test</div>

<div class="test" >test</div>
</p>

There is no issue if the shortcode is
<span class="test" >test</span>

So currently the user of a shortcode has to know if the shortcode is in a block or not.

Something like this was reported a long time ago:

Shortcodes and <p> tags

After upgrading to hugo 1.5, I realised I was relying on the earlier behaviour that (perhaps unsemantically) wrapped my rendered shortcodes with <p> tags. Now I’m running into some inconsistent behaviour that I hope someone could help me explain. I have content that looks like the following: [snipped paragraphs that don't seem to affect behavior] {{< figure src="/img/research/cardiac-mechanics/orthotropic-passive-stress.png" title="The orthotropic response of the myocardium model demonstrated…

and there is a pending issue:

Issue: Shortcode output wrapped in <p> tags under certain conditions

As far as I know the closing <p> tag is optional. So I’m OK with the <p> - but not with the </p> tag.

I would like to know:
Look’s like a “block” shortcode has to be used with a preceding and following empty line in the content files.
Is there anything I can do on the shortcode side to fix my pages?

[onedrawingperday]

Not on the shortcode side. But you can do a simple replace func checking for those stray p closing tags in your .Content and remove them.

If you need something fancier see this.

[it-gro]

Hej - cool - thx for pointing me into the right direction!

I did:

{{ .Content | replaceRE "<p><div" "<div" | replaceRE "(?s:</div>\n?</p>)" "</div>" | safeHTML }}

https://github.com/it-gro/HugoTestingShortcodeIllegalP/blob/master/layouts/_default/single.html

This fixed the first two test cases. Remaining

{{< dummy >}}
more text

=>

<div class="test" >test</div>

more text</p>

I’ll do some more tests with real content.
Thx again!

[Mario]

Hi, can we reopen that?

A pre-deployment cleaning process is error-prone, we need to address that behaviour in Hugo directly to turn off <p>-wrapping in MD for certain pages, e.g. landing pages.

thanks

[jmooring]

Hi @Mario, please create new a new topic describing the details of your problem/question. See https://discourse.gohugo.io/t/requesting-help/9132.

N.B. We discourage reviving old topics because people who participated in those discussions of yesteryear are usually not here anymore and they rarely reply to questions. It is best to open a new topic rather than bumping an old one.

[onedrawingperday]

In addition to what @jmooring said above I would like to add that this topic is from 2018, back then Hugo used a different default Markdown processor than the one that is used currently.

Therefore this topic and the related GitHub issue are outdated.