Shortcode without markdown nested in Shortcode with markdown is wrapped with <p>

support
1

We have the following in our Markdown file:

{{% notice %}}
{{< foobar >}} Lorem ipsum dolor.
{{% /notice %}}

The notice shortcode looks like this:

<div class="notice">{{ .Inner }}</div>

The foobar shortcode looks like this:

<span class="foobar">Foobar</span>

The expected HTML output would be

<div class="notice">
  <p><span class="foobar">Foobar/<span> Lorem ipsum dolor.</p>
</div>

However, the actual HTML output is

<div class="notice">
  <p><span class="foobar">Foobar/<span></p>
  <p>Lorem ipsum dolor.</p>
</div>

Why is this the case? Shouldn’t the whole content of the {{% %}} short code be wrapped in <p>, rather than the {{< >}} shortcode separately as well?

Generated with Hugo 0.122.0.

2

I am unable to reproduce the behavior as described. Try it:

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

To achieve this:

<div class="notice">
<p><span class="foobar">Foobar</span>
Lorem ipsum dolor.</p>
</div>

You need to do this:

{{% notice %}}

{{< foobar >}} Lorem ipsum dolor.
{{% /notice %}}

Notice the blank line. Mixing raw HTML with markdown is tricky. See the CommonMark specification for details.

3

Your reproduction example does not have a blank line though and it still works :thinking:
Must be something else in our setup then.

I also notice that in your example the {{< foobar >}} never gets wrapped in a <p> tag, even in regular content, which is also unexpected. For example, in your setup

Lorem ipsum

{{< foobar >}}

dolor sit

yields

<p>Lorem ipsum</p>

<span class="foobar">Foobar</span>

<p>dolor sit</p>

instead of

<p>Lorem ipsum</p>

<p><span class="foobar">Foobar</span></p>

<p>dolor sit</p>

as per regular markdown rules.

In our setup the output is the latter, so I am guessing we have something confgured that lets Hugo behave this way, but I am not sure what.

4

My example uses your markdown, not the correct markdown. Modify the markdown in my example to see the correct (expected) results.

5

I know, but your example - using my code - is already correct. It yields

<div class="notice">
<span class="foobar">Foobar</span>
 Lorem ipsum dolor.
</div>
6

Also, as a rule of thumb, when examining the rendered HTML, view source (Ctrl+U in your browser) instead of relying on the browser’s dev tools. The dev tools willl correct invalid HTML, so in some cases you won’t see what is actually rendered.

7

I know, I am doing that already :wink:

1 Like
8

In your initial post you said you wanted this:

<div class="notice">
  <p><span class="foobar">Foobar/<span> Lorem ipsum dolor.</p>
</div>
9

Yes, I see what you mean now - but it does not solve the problem for us. In our setup

{{% notice %}}

{{< foobar >}} Lorem ipsum dolor.
{{% /notice %}}

yields

<div class="notice">
  <p><span class="foobar">Foobar/<span></p>
  <p>Lorem ipsum dolor.</p>
</div>

(i.e. no difference to before)

but we want

<div class="notice">
  <p><span class="foobar">Foobar/<span> Lorem ipsum dolor.</p>
</div>

In fact, as mentioned previously

{{< foobar >}}

always gets wrapped in <p>, no matter what, while in your test setup, it never gets wrapped (even in cases where it should).

10

I have no idea what you are doing, because…

image
image528Ă—649 31.4 KB

If you need additional help you should provide a link to the repository for your site.

See Requesting Help.

Let us see your code

Include a link to the source code repository of your project, because we really need the context of seeing your templates and partials to be able to help you. It is trivial to do a quick git clone on your repo, then run hugo server in your project, to help you out. On the other hand, recreating your code from screenshots, or sort of guessing at it, is not.

If you can’t share your repository for whatever reason, consider creating a dummy repo that you can share, which reproduces the problem you’re experiencing.

11

The repository can be found here: GitHub - contao/docs: Contao Documentation

This is our config: docs/page/config/_default/hugo.yml at main · contao/docs · GitHub
Which should essentially be the same as yours, as the other settings should have no influence on rendering.

The shortcodes in question are docs/page/layouts/shortcodes/version-tag.html at main · contao/docs · GitHub for the inner one and hugo-theme-learn/layouts/shortcodes/notice.html at master · matcornic/hugo-theme-learn · GitHub for the outer one.

Initially I though that

{{ $_hugo_config := `{ "version": 1 }` }}

is causing the behavior change, but that is not the case unfortunately.

12

I assume I build your site by cd’ing into page/ and then hugo server -e dev?

Which content page is exhibiting the problem?

13

You are introducing lots of new lines in your version-tag shortcode. Per the CommonMark link I provided earlier, you need to pay attention to new lines when mixing raw HTML with markdown.

Remove the new lines (white space) by replacing {{ with {{- at the beginning of each line.

Then I get this:

<div>
  <p>
    <span class="version-tag" title="This feature is only available in Contao 123 and later.">
      since <strong>123</strong>
    </span>
    Lorem ipsum dolor.
  </p>
</div>

And you said that’s what you wanted.

14

Aaah, yes, thank you very much! I already suspected it’s because of the white space in the inner shortcode and I did test that using {{-/-}} - but something must have gone wrong during testing. (Another issue we currently have is that hugo server says it rebuilt - but the changes are not visible when the browser auto-refreshed, or even when I manually refresh. I always have to do a full rebuild manually.)

15

Hugo server does not rebuild public. Hugo server runs its own copy. What url are you looking at? I suggest starting a new question. Most forums dont want multiple questions in one thread too difficult for others to find the info.

16

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