# Footnotes
> Render academic-style footnotes in @humanspeak/svelte-markdown with markedFootnote, using built-in components or inline Svelte 5 snippet overrides.
**Source:** [https://markdown.svelte.page/examples/footnotes](https://markdown.svelte.page/examples/footnotes)
**Markdown mirror:** [https://markdown.svelte.page/examples/footnotes.md](https://markdown.svelte.page/examples/footnotes.md)
---
This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page.
## FIG-001: component renderers.
Pair the built-in `FootnoteRef` + `FootnoteSection` components through the `renderers` prop. Best for long-form / academic writing that needs consistent footnote styling across pages.
**Metadata:** tag: `COMPONENT` | override: `component`
### Notes
- `markedFootnote()` extension parses `[^id]` references + `[^id]: text` definitions into linked footnote tokens.
- Built-in `FootnoteRef` + `FootnoteSection` give you superscript reference numerals and a backlink from the definition list.
- Best for long-form / academic writing where footnote styling should stay identical across every page.
### Source
#### ComponentRendered.svelte
Source file: [src/lib/examples/footnotes/demos/ComponentRendered.svelte](https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/lib/examples/footnotes/demos/ComponentRendered.svelte)
```svelte
```
## FIG-002: snippet overrides.
Inline `{#snippet footnoteRef}` + `{#snippet footnoteSection}` blocks let one page own its footnote markup — bracketed reference style and a chip-labelled definition list, all in one file.
**Metadata:** tag: `SNIPPET` | override: `inline snippets`
### Notes
- Inline `{#snippet footnoteRef}` + `{#snippet footnoteSection}` keep the bidirectional links but let one page own its markup.
- Demo here swaps superscript for `[n]` bracketed references and a chip-labelled definition list — all per-page, no shared component.
### Source
#### SnippetRendered.svelte
Source file: [src/lib/examples/footnotes/demos/SnippetRendered.svelte](https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/lib/examples/footnotes/demos/SnippetRendered.svelte)
```svelte
{#snippet footnoteRef(props: FootnoteRefProps)}
[{props.id}]
{/snippet}
{#snippet footnoteSection(props: FootnoteSectionProps)}
Footnotes
{#each props.footnotes as fn (fn.id)}
-
{fn.id}
{fn.text}
↩
{/each}
{/snippet}
```