HUGO

Shortcodes and </p> tags (2)

support
#1

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:


and there is a pending issue:

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?

#2

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.

1 Like
#3

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!

3 Likes