# Columns shortcode that works with footnotes?

**URL:** https://discourse.gohugo.io/t/columns-shortcode-that-works-with-footnotes/40186
**Category:** support
**Tags:** footnotes
**Created:** [August 25, 2022, 5:10pm UTC](https://discourse.gohugo.io/t/columns-shortcode-that-works-with-footnotes/40186 "2022-08-25T17:10:18Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![Joshua\_Pritikin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/joshua_pritikin/32/17605_2.png) [@Joshua\_Pritikin](https://discourse.gohugo.io/u/Joshua_Pritikin)
#### Post date: [August 25, 2022, 5:10pm UTC](https://discourse.gohugo.io/t/columns-shortcode-that-works-with-footnotes/40186/1 "2022-08-25T17:10:18Z")

</div>

I posted a [bug](https://github.com/gohugoio/hugo/issues/10203) 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](https://github.com/alex-shpak/hugo-book), `columns` is defined as:

```auto
<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?

---

<div class="post-metadata">

### Author: ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)
#### Post date: [August 25, 2022, 5:34pm UTC](https://discourse.gohugo.io/t/columns-shortcode-that-works-with-footnotes/40186/2 "2022-08-25T17:34:31Z")

</div>

See [this example](https://discourse.gohugo.io/t/footnotes-are-not-rendered-as-expected-in-nested-shortcodes/35165/3).

---

<div class="post-metadata">

### Author: ![Joshua\_Pritikin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/joshua_pritikin/32/17605_2.png) [@Joshua\_Pritikin](https://discourse.gohugo.io/u/Joshua_Pritikin)
#### Post date: [August 25, 2022, 6:55pm UTC](https://discourse.gohugo.io/t/columns-shortcode-that-works-with-footnotes/40186/3 "2022-08-25T18:55:21Z")

</div>

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 \>}}](https://gohugo.io/content-management/shortcodes/#shortcodes-with-markdown). 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.

---

<div class="post-metadata">

### Author: ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)
#### Post date: [August 25, 2022, 7:36pm UTC](https://discourse.gohugo.io/t/columns-shortcode-that-works-with-footnotes/40186/4 "2022-08-25T19:36:38Z")

</div>

You’ll need to pass the content through `safeHTML`.

layouts/shortcodes/columns.html

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

```

---

<div class="post-metadata">

### Author: ![Joshua\_Pritikin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/joshua_pritikin/32/17605_2.png) [@Joshua\_Pritikin](https://discourse.gohugo.io/u/Joshua_Pritikin)
#### Post date: [August 25, 2022, 8:08pm UTC](https://discourse.gohugo.io/t/columns-shortcode-that-works-with-footnotes/40186/5 "2022-08-25T20:08:47Z")

</div>

Submitted [PR](https://github.com/alex-shpak/hugo-book/pull/479) to the hugo-book theme.

---

<div class="post-metadata">

### Author: ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)
#### Post date: [August 25, 2022, 8:12pm UTC](https://discourse.gohugo.io/t/columns-shortcode-that-works-with-footnotes/40186/6 "2022-08-25T20:12:26Z")

</div>

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](https://discourse.gohugo.io/t/determine-which-shortcode-notation-was-used/36603).

---

<div class="post-metadata">

### Author: ![system](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/system/32/1_2.png) [@system](https://discourse.gohugo.io/u/system)
#### Post date: [August 27, 2022, 8:12pm UTC](https://discourse.gohugo.io/t/columns-shortcode-that-works-with-footnotes/40186/7 "2022-08-27T20:12:39Z")

</div>

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