Weird stray </p> (closing paragraph) tags

support
21

Yes, that part of it is odd - exactly what I was saying about images if you use a render-hook and new feature not to wrap images in a paragraph.

I put shortcodes on lines separated by blank lines, it is more readable that way anyway.

As far as I know it is a markdown thing, I have come across it in another markdown based CMS.

22

I donā€™t know how to make this any clearer. Please see this example which uses the reference implementation of the CommonMark specification.

When shortcodes are called with the {{<>}} notation, the markdown parser receives placeholdersā€”just a string, as shown in the example above.

Can we please close this topic?

23

Clicking the HTML tab in that utility shows that your example renders to:

<p>shortcode-1
shortcode-2
shortcode-3</p>
<!-------->
<p>shortcode-1</p>
<p>shortcode-2</p>
<p>shortcode-3</p>

But when you try those two variations with actual shortcodes and in Hugo, thatā€™s not what you get. You get:

  <p>shortcode-1

shortcode-2

shortcode-3
</p>
<!-- raw HTML omitted -->
shortcode-1

shortcode-2

shortcode-3

And hereā€™s a repo to reproduce it: GitHub - lpar/hugo-forum-topic-14929b

24

A typical shortcode looks likeā€¦

<div>shortcode-1</div>

or

<p>shortcode-2</p>

or

<img src="shortcode-3">

Shortcodes in markdown without blank lines

Markdown

{{< shortcode-1 >}}
{{< shortcode-2 >}}
{{< shortcode-3 >}}
{{< shortcode-3 >}}
{{< shortcode-3 >}}

Rendered (invalid HTML as expected)

<p>
  <div>shortcode-1</div>
  <p>shortcode-2</p>
  <img src="shortcode-3">
  <img src="shortcode-3">
  <img src="shortcode-3">
</p>

Shortcodes in markdown with blank lines

Markdown

{{< shortcode-1 >}}

{{< shortcode-2 >}}

{{< shortcode-3 >}}

{{< shortcode-3 >}}

{{< shortcode-3 >}}

Rendered (valid HTML)

<div>shortcode-1</div>
<p>shortcode-2</p>
<img src="shortcode-3">
<img src="shortcode-3">
<img src="shortcode-3">
25

If you want the shortcodes fully rendered before sending them to the markdown parser, use the {{%%}} notation, and do this in site configuration:

[markup.goldmark.renderer]
unsafe = true

Itā€™s not unsafe if you control the content.

Shortcodes in markdown without blank lines Markdown

Markdown

{{% shortcode-1 %}}
{{% shortcode-2 %}}
{{% shortcode-3 %}}
{{% shortcode-3 %}}
{{% shortcode-3 %}}

Rendered (valid HTML)

<div>shortcode-1</div>
<p>shortcode-2</p>
<img src="shortcode-3">
<img src="shortcode-3">
<img src="shortcode-3">

Shortcodes in markdown with blank lines Markdown

Markdown

{{% shortcode-1 %}}

{{% shortcode-2 %}}

{{% shortcode-3 %}}

{{% shortcode-3 %}}

{{% shortcode-3 %}}

Rendered (valid HTML)

<div>shortcode-1</div>
<p>shortcode-2</p>
<img src="shortcode-3">
<img src="shortcode-3">
<img src="shortcode-3">
26

Yes, thatā€™s the surprising thing. As I wrote:

A sequence of shortcodes arenā€™t wrapped with paragraphs if you put Markdown paragraph breaks between them. If you donā€™t put Markdown paragraph breaks between them, they are wrapped in a paragraph.

I tried putting <span> elements in the shortcodes in case that made a difference, but it doesnā€™t. I also found another wrinkle:

{{< shortcode-1 >}}

{{< shortcode-2 >}}{{< shortcode-2 >}}

{{< shortcode-3 >}}

This renders to:

<span>shortcode-1</span>

<p><span>shortcode-2</span>
<span>shortcode-2</span>
</p>
<span>shortcode-3</span>

One shortcode on a line on its own: no paragraph wrapper. Two shortcodes on a line on their own: paragraph wrapper.

So it looks as if the rule is: Two or more shortcodes in succession will always get wrapped in a paragraph, unless you separate them with a blank line.

I donā€™t think the Commonmark spec explains this behavior, and I donā€™t recall ever seeing it documented.

I guess as long as people can find this discussion and the workaround, thereā€™s nothing else to be done, because changing Hugoā€™s behavior at this point would likely break thousands of sites.

27

For anyone stumbling across this in the futureā€¦

Iā€™ve updated the example with the four cases on one page, including a detailed explanation of what happens (and why) in each of the four cases.

git clone --single-branch -b hugo-forum-topic-14929 https://github.com/jmooring/hugo-testing hugo-forum-topic-14929
cd hugo-forum-topic-14929
hugo server

Itā€™s a 10 minute read, but worth the effort.

1 Like
28

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