As noted in the post on markdown, footnotes are now supported in Markdown fields. Footnotes allow you to reference relevant information without disrupting the flow. Footnotes are added using [^fn] with the number of the footnote, for example [^fn1]. ¹

In this post I look at how to style the footnotes, particularly to surround the footnote number in [] and to make the footnote smaller.

Both HTML and Markdown are supported content formats in Hugo. The current markdown parser is Goldmark.²

Footnotes allow you to reference relevant information without disrupting the flow.

Footnotes are added using [^fn] with the number of the footnote, for example [^fn1].

See GitHub.blog/changelog ¹

When the markdown footnote is rendered as HTML, the list of footnotes will appear at the bottom of the page. The footnote section where all the footnotes are listed is given a class “footnotes”. The footnote is given the class “footnote-backref”.

The footnote number that appears as superscript in the text is given the class “footnote-ref”.

You might want to change the default styling of the footnotes at the bottom of the pafe, for example to change font-size, colour etc. I prefer to have them small as some URLs can be quite long.

You can set rules to style the classes in the CSS style files. If you want to add brackets [ or parentheses (bracket before and after the superscript you can use the before and after CSS pseudo elements. ::before to insert content before an element ::after to insert content after an element

If you don’t want footnotes to be enabled, then set the footnote extension to false in the config files:

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

Aside on footnote numbering

It does not really matter what number you assign to a footnote. The footnotes will be rendered in the order that they appear in the document. You can even use letters. The important thing is that the footnote number and the footnote note use the same number or letter.

For example: [^fn1] ³

[^fn1]: The footnote text