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 by varying simple shear-stress responses along different planes defined by the muscle fibre (f), myocite sheet (s) and sheet-normal (n) directions." >}}

[snipped paragraphs that don't seem to affect behavior]

{{< figure src="/img/research/cardiac-mechanics/biventricle-mesh.png" title="A finite element mesh of a generic biventricle generated with CGAL." >}}

The strange behaviour is that the rendered output puts <p> tags for the second use of the shortcode and not the first:

    <figure>
  <img class="pure-img" src="/img/research/cardiac-mechanics/orthotropic-passive-stress.png" alt="The orthotropic response of the myocardium model demonstrated by varying simple shear-stress responses along different planes defined by the muscle fibre (f), myocite sheet (s) and sheet-normal (n) directions.">
  <figcaption>The orthotropic response of the myocardium model demonstrated by varying simple shear-stress responses along different planes defined by the muscle fibre (f), myocite sheet (s) and sheet-normal (n) directions.</figcaption>
</figure>


<p><figure>
  <img class="pure-img" src="/img/research/cardiac-mechanics/biventricle-mesh.png" alt="A finite element mesh of a generic biventricle generated with CGAL.">
  <figcaption>A finite element mesh of a generic biventricle generated with CGAL.</figcaption>
</figure>
</p>

Can someone help me debug this?

There is probably a linefeed or two behind the second.

I don’t see any difference in the linebreaks/whitespace around these two uses. Here is the content I am trying to work with if that helps: https://gist.github.com/hnarayanan/1858d731515f29f884f6

I also see another strange behaviour that I hadn’t noticed earlier. If I shorten the title of the first figure shortcode use, the second doesn’t have the <p> tags wrapping the generated output.

And I don’t completely understand it (because I believe there might be a bug), but here is a workaround I’ve found that might temporarily help someone else. As long as there is “enough” content in the paragraph following the shortcode, it doesn’t introduce <p> tags.

I’m the one who reported the erroneous <p> tag behaviour in 0.14:

https://discuss.gohugo.io/t/info-img-shortcode-figure-tag-auto-wrapped-in-p-tag-invalid-html/1202

I can replicate this using your gist.

There are a few things I’ve found:

  1. If there is just one shortcode, it doesn’t get wrapped in <p> tags

  2. If there are multiple shortcodes, the first doesn’t get wrapped in <p> tags (probably related to above)

  3. In order to ensure no shortcodes are wrapped in <p> tags, the final shortcode must be followed by a number of distinct <p> tag wrapped lines proportionate to the number of shortcodes in the document.

By that I mean if you have say 6 shortcodes one after the other, you need 16 lines following them in order for none to be wrapped in <p> tags. If you have 5 shortcodes one after the other you need 12 lines.

  1. ‘Lines following shortcode’ don’t have to come at the end of the document, if you have a series of shortcodes it seems the number of interceeding <p> tag wrapped lines are cumulatively ranked towards each consecutive shortcode so if you had 30 lines interspaced between shortcodes throughout the document, as long as each shortcode has at least 5 proceeding lines each, they’ll all be spared wrapping.

  2. Related to point 4, the <p> tags that get wrapped around shortcodes incorrectly also count towards the number of <p> tag wrapped lines needed to follow preceeding shortcodes - so enough shortcodes in a row and you seem to be about to start unwrapping some of the ‘first’ few in the list.

NOTE - I may have miss counted the exact number of lines in between shortcodes, my eyes are actually bleeding right now…

This is an unusual one!

Thank you for this excellent, excellent synopsis. I thought I was going crazy myself as I observed similar behaviours and stumbled along in the dark until something was good enough for my uses.

In particular, I stumbled into a combination of 3–5 that worked out good enough for me without looking too deeply into the situation. This is an unusual one!

Also, to add a number 6 to your list, I found that the length of the title on the first shortcode has some bearing on the <p> wrapping on the second: https://discuss.gohugo.io/t/shortcodes-and-p-tags/2164/3

Have you opened an issue on GitHub?

Feel free to use my info above if you haven’t opened on yet (I’m @puffinblue if you need me there).

Not yet. I will do so.

I needed this discussion to sanity check whether this wasn’t just something weird with my content.

Thanks for getting to it first.