Footnotes rendering from within a partial?

support
1

I’m trying to include a footnote in a partial I’ve created. The partial is super simple and essentially just wraps the {{ .Inner }} in a div. Something like this:

<div class="callout">{{ .Inner | markdownify }}</div>

{{< callout >}}
This is my content
{{< /callout > }}

This seems to work for most things I throw at it… except footnotes. Which completely fail to render. :frowning:

As a dev I can see why this might be the case but I don’t think it really should be intended behaviour? I tried to solve it by turning unsafe markup on and simply including the div html in my post markdown but then the renderer failed to process any markdown I had between the two divs.

Is there a potential solution?

2

Please show a complete example of your markdown, where the shortcode is used in conjunction with footnotes.

1 Like
3

Mmm. Bit difficult without a lot of cruft but I hope this clarifies.

{{< callout >}}
This is my content with a footnote[^1]
{{< /callout > }}

[^1]: This would be the footnote that you see.

I’m expecting to see on my page:

<div class="callout">
<p>
  This is my content with a footnote
  <sup id="fnref:1">
    <a href="#fn:1" class="footnote-ref" role="doc-noteref">
      1
    </a>
  </sup>
</p>
</div>

<section class="footnotes" role="doc-endnotes">
<hr>
<ol>
  <li id="fn:1" role="doc-endnote">
    <p>
      This would be the footnote that you see. <a href="#fnref:1" class="footnote-backref" role="doc-backlink">↩︎</a>
    </p>
  </li>
</ol>
</section>

What I actually get is:

<div class="callout">
<p>
  This is my content with a footnote[^1]
</p>
</div>

Notice that not only does the link not get created but the footnote section is entirely missing.

4

You’ll have to do this instead:

{{< callout >}}
This is my content with a footnote
{{< /callout > }}[^1]

You will also need to prevent the superscript from jumping to the next line. You could do either of these in your shortcode:

  1. Style the <div> to display inline.
  2. Use a <span> instead of a <div>. For example:
     <span class="callout">{{- .Inner | markdownify -}}</span>
 {{- /* This comment trims trailing whitespace. */ -}}

This question has come up before:

5

I believe the issue is that the markdown rendering in a shortcode via

{{ .Inner | markdownify }}

only renders the markdown with local context, i.e., without the full document containing all the footnotes.

What worked for me is to define the shortcode as follows without markdownify and with the linebreaks:

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

and then use the shortcode as follows (see Shortcodes | Hugo)

{{% callout %}}
This is my content
{{% /callout %}}

Because of the % delimiters markdownify is not needed and the content is rendered with global context. The new lines in the shortcode somehow have an impact on what is rendered as markdown and what left as html.

Additionally, I use the configuration

markup:
  goldmark:
    renderer:
      unsafe: true

I am quite new to Hugo so I don’t have full understanding here, but still hope it is helpful.

7

@hacky86 Please do not keep bumping up old topics, especially those several years old. Please do not keep posting essentially the same response to multiple topics. Please read Help keep this forum practical .