Columns shortcode that works with footnotes?

support
1

I posted a bug reporting that footnotes were not working within the columns shortcode. Joe Mooring replied that misbehavior was not a bug, but was caused by passing .Inner through .Page.RenderString. In the hugo-book theme, columns is defined as:

<div class="book-columns flex flex-wrap">
{{ range split .Inner "<--->" }}
  <div class="flex-even markdown-inner">
    {{ . | $.Page.RenderString }}
  </div>
{{ end }}
</div>

Is there a better way to define this shortcode such that footnotes work without breaking other stuff?

2

See this example.

3

You posted that forum link the github bug too; I moved the conversation here in hopes of really understanding your answer. I found the doc on the difference between {{% columns %}} and {{< columns >}}. For the page in question, both ways of invoking the shortcode produce the same result, maybe because of $.Page.RenderString. If I remove $.Page.RenderString then the {{< completely breaks the rendering and {{% preserves the footnote but fails on {{< hint warning >}} and the literal HTML. So I understand that {{% seems like the correct approach, but is not sufficient. That’s why I suspected that there could be a better way to define the columns shortcode (above), but I’m not sure what to try.

4

You’ll need to pass the content through safeHTML.

layouts/shortcodes/columns.html

<div class="book-columns flex flex-wrap">
{{ range split .Inner "<--->" }}
  <div class="flex-even markdown-inner">
    {{ . | safeHTML }}
  </div>
{{ end }}
</div>
5

Submitted PR to the hugo-book theme.

6

If I were the theme author I would reject the PR because it will break existing sites that the invoke the shortcode with the {{< foo >}} notation. And there is no way to determine which notation was used.