I was just scrolling though this list of Markdown features supported by Hugo and noticed that footnotes was one of them. I like footnotes a lot and had a quick look into using them before, but they didn’t work back then. But that was maybe before I looked into using Goldmark as the Markdown processor when writing my last article about code syntax highlighting with Hugo.

Enabling footnotes with Goldmark Link to heading

So it seems I enabled them like this recently when I introduced Goldmark:

1
2
3
4
5
6

[markup]
  defaultMarkdownHandler = "goldmark"

[markup.goldmark]
  [markup.goldmark.extensions]
    footnote = true

The full example can be found in my article about syntax highlighting at the very end.

Using footnotes Link to heading

This is a example taken from here:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

Here's a simple footnote,[^1] and here's a longer one.[^bignote]

[^1]: This is the first footnote.

[^bignote]: Here's one with multiple paragraphs and code.

    Indent paragraphs to include them in the footnote.

    `{ my code }`

    Add as many paragraphs as you like.

The result looks like this:

Here’s a simple footnote,¹ and here’s a longer one.²

The letters after the ^ sign are simply identifiers, which all end up being numbers. So you could use a multi-letter identifier for a short footnote too, that doesn’t make a difference. Naming footnotes like ^wave-emoji³ is just maybe better to not get confused what the footnote is supposed to be about, for example when re-using it.³

Nice though, you can keep the footnote close to where you use it. They appear all at the end of the doc, but they don’t need to be defined there.³

Have a look:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

Naming footnotes like `^wave-emoji`[^wave-emoji] is just
maybe better to not get confused what the footnote is supposed to be
about, for example when re-using it.[^wave-emoji]

[^wave-emoji]: 👋

Nice though, you can keep the footnote close to where you use it.
They appear all at the end of the doc, but they don’t need to be
defined there[^wave-emoji].

Have a look: