# Footnotes

> Numbered footnotes from a section of your Notion page.

Notion has no footnote block, so notionic builds footnotes from what Notion has: a section of notes at the end of the page, and links to them in the text. Each link becomes a numbered superscript, and the section becomes a footnote list that links back to each reference. Nothing extra is fetched, and no JavaScript ships.

# Write footnotes in Notion

1. At the end of the page, add a heading named `Footnotes`, at any level.
2. Under it, write each note as its own paragraph or list item.
3. In the text, select the word and link it to its note: on the note, open `⋯` › **Copy link to block**, then paste it as the word's link.

The links still work in Notion: clicking one jumps to its note.

- **Numbers follow reading order.** The first note you link to is 1, wherever it sits in the list, and the list is sorted by number.
- **A note linked twice** keeps one number, and gets a back-link to each place: ↩ a b.
- **The section** runs to the next heading of the same or a higher level. Under a toggleable heading, it's the toggle's content.
- **Notes nothing links to** are listed after the numbered ones, so nothing disappears. A section nothing links to renders as ordinary content.

# Options

```typescript
<NotionRenderer
  blocks={blocks}
  footnotes={{
    headings: ["Footnotes", "Referências", "Références"],
    showTitle: true,
    title: "Notes",
  }}
/>
```

- `headings`: the heading texts that start the section, matched ignoring case. Default `["Footnotes"]`. List one per language you write in; `[]` turns footnotes off.
- `showTitle`: show the heading above the list. By default, a separator sits there instead, and the heading is only read by screen readers.
- `title`: the title to show, instead of the heading's text.

# Change the list

The list renders through `Footnotes`. Replace it with `components.footnotes`, which gets the `notes` (each with its `block`, `number` and `refIds`), the `title`, `showTitle`, the heading's `level` and `context`:

```typescript
import { RichText, type FootnotesProps } from "notionic"

function MyFootnotes({ notes, context }: FootnotesProps) {
  return (
    <ol className="text-sm">
      {notes.map((note) => (
        <li key={note.block.id} id={note.number ? `fn-${note.number}` : undefined}>
          {/* render note.block, and link back to note.refIds */}
        </li>
      ))}
    </ol>
  )
}

<NotionRenderer blocks={blocks} components={{ footnotes: MyFootnotes }} />
```

Keep the ids: references link to `#fn-1`, and back-links to `#fnref-1`, `#fnref-1-2`…

# Outlines and Markdown

`collectHeadings` leaves the footnotes heading out of a table of contents, unless the title shows. `blocksToMarkdown` writes GitHub-flavored footnotes: `word[^1]` in the text and `[^1]: The note` at the end. Pass both the same `footnotes` option as the renderer:

```typescript
collectHeadings(blocks, { footnotes })
blocksToMarkdown(blocks, { footnotes })
```