Footnotes¶
Footnotes allow you to add references, citations, and supplementary information without interrupting the main flow of your documentation.
Overview¶
The footnotes extension provides:
- Reference-style footnotes - Define once, reference anywhere
- Inline footnotes - Quick notes without separate definitions
- Multiple references - Reference the same footnote multiple times
- Rich content - Include formatted text, lists, and code blocks
- Automatic numbering - Let Markdown handle the numbering
- Accessible markup - Semantic HTML with ARIA attributes
Configuration¶
Enable footnotes in your mkdocs.yml
:
Basic Usage¶
Simple Footnotes¶
Create a footnote reference with [^label]
and define it with [^label]: definition
:
Result:
This is a statement that needs a citation1.
Multiple References¶
Reference the same footnote multiple times:
Result:
First reference2 and second reference2.
Inline Footnotes¶
Create footnotes inline without separate definitions:
Result:
Here's an inline footnote^[This is defined right in the text].
Advanced Usage¶
Multi-paragraph Footnotes¶
Include multiple paragraphs in a footnote:
Complex topic[^multi].
[^multi]: This is the first paragraph of the footnote.
This is the second paragraph. Note the indentation.
This is the third paragraph.
Result:
Complex topic3.
Footnotes with Lists¶
Include lists in footnotes:
See the requirements[^list].
[^list]: The following items are required:
- Python 3.8 or higher
- MkDocs 1.5.0 or higher
- Material theme 9.0 or higher
Make sure all dependencies are installed.
Result:
See the requirements4.
Footnotes with Code¶
Include code blocks in footnotes:
Example implementation[^code].
[^code]: Here's how to implement it:
```python
def calculate(x, y):
return x + y
```
Call it with `calculate(5, 3)`.
Result:
Example implementation5.
Footnotes with Links¶
Include links in footnotes:
See the official documentation[^docs].
[^docs]: Visit [Material for MkDocs](https://squidfunk.github.io/mkdocs-material/) for more information.
Result:
See the official documentation6.
Styling¶
CSS Classes¶
Footnotes generate the following CSS classes:
.footnote
- The footnote reference link.footnote-ref
- The reference number.footnote-backref
- The back reference arrow.footnotes
- The footnote definitions container
Custom Styling¶
Add custom styles for footnotes:
/* Footnote references */
.md-typeset .footnote {
color: var(--md-primary-fg-color);
font-weight: bold;
}
/* Footnote definitions */
.md-typeset .footnotes {
font-size: 0.85rem;
border-top: 1px solid var(--md-default-fg-color--lightest);
margin-top: 2rem;
padding-top: 1rem;
}
/* Hover effect */
.md-typeset .footnote:hover {
color: var(--md-accent-fg-color);
}
Best Practices¶
1. Descriptive Labels¶
Use meaningful labels for footnotes:
2. Placement¶
Place footnote definitions near their first reference:
✅ Good:
First paragraph with reference[^ref1].
[^ref1]: Definition immediately after paragraph.
Second paragraph continues...
3. Content Guidelines¶
Keep footnotes concise and relevant:
✅ Good:
[^version]: Requires Python 3.8 or higher
❌ Bad:
[^version]: This requires Python 3.8 or higher because...
[500 words of explanation]
4. Academic Citations¶
Use consistent citation format:
Recent studies[^johnson2023] show improved performance.
[^johnson2023]: Johnson, A. et al. (2023). "Performance
Improvements in Documentation Systems." *Tech Journal*,
45(3), 123-145. DOI: 10.1234/tj.2023.45.3.123
Common Patterns¶
References Section¶
Group all footnotes at the end:
## Main Content
Various claims[^1] and statements[^2] with evidence[^3].
## References
[^1]: First source
[^2]: Second source
[^3]: Third source
Glossary Integration¶
Combine with definition lists:
Citation Styles¶
Different citation formats:
APA Style[^apa]:
[^apa]: Smith, J. (2023). *Title*. Publisher.
MLA Style[^mla]:
[^mla]: Smith, John. *Title*. Publisher, 2023.
Chicago Style[^chicago]:
[^chicago]: Smith, John. *Title*. City: Publisher, 2023.
Integration with Other Features¶
With Admonitions¶
!!! note "Important[^note-ref]"
This admonition includes a footnote reference.
[^note-ref]: Additional context for the note
With Tables¶
Feature | Version7 | Status |
---|---|---|
Python | 3.8+ | Required |
MkDocs | 1.5+8 | Required |
With Code Annotations¶
Accessibility¶
Footnotes include proper ARIA attributes:
<!-- Reference -->
<sup>
<a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a>
</sup>
<!-- Definition -->
<li id="fn:1" role="doc-footnote">
<p>Footnote text
<a href="#fnref:1" class="footnote-backref"
role="doc-backlink">↩</a>
</p>
</li>
Troubleshooting¶
Common Issues¶
- Undefined references: Ensure all
[^label]
have corresponding[^label]:
definitions - Formatting breaks: Maintain consistent indentation in multi-line footnotes
- Numbering issues: Let Markdown handle numbering automatically
- Missing footnotes: Check for typos in labels
Debug Tips¶
Enable verbose output to debug footnote issues:
Examples¶
Documentation with Citations¶
MkDocs uses Python[^python] for its build system. The
Material theme[^material] adds extensive features. Version
9.0[^v9] introduced significant improvements.
[^python]: Python Software Foundation. python.org
[^material]: Created by Martin Donath. MIT licensed.
[^v9]: Released January 2024 with 50+ new features.
Tutorial with Notes¶
Configure your site10 in mkdocs.yml
.
See Also¶
-
This is the footnote definition. ↩
-
This is the first paragraph of the footnote.
This is the second paragraph. Note the indentation.
This is the third paragraph. ↩
-
The following items are required:
- Python 3.8 or higher
- MkDocs 1.5.0 or higher
- Material theme 9.0 or higher
Make sure all dependencies are installed. ↩
-
Here's how to implement it:
Call it with
calculate(5, 3)
. ↩ -
Visit Material for MkDocs for more information. ↩
-
Minimum supported versions ↩
-
Material theme requires MkDocs 1.5.0 ↩
-
Requires Python 3.8+. Use virtual environment. ↩
-
See configuration guide for all options. ``` ↩