1
0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-12-21 03:45:57 +01:00
mkdocs-material/docs/reference/footnotes.md

113 lines
2.9 KiB
Markdown
Raw Normal View History

2020-07-20 17:40:48 +02:00
---
2021-12-21 13:47:28 +01:00
icon: material/format-align-bottom
2020-07-20 17:40:48 +02:00
---
# Footnotes
2021-10-10 12:19:14 +02:00
Footnotes are a great way to add supplemental or additional information to a
specific word, phrase or sentence without interrupting the flow of a document.
Material for MkDocs provides the ability to define, reference and render
footnotes.
2020-07-20 17:40:48 +02:00
## Configuration
2021-10-10 12:19:14 +02:00
This configuration adds the ability to define inline footnotes, which are then
rendered below all Markdown content of a document. Add the following lines to
`mkdocs.yml`:
2020-07-20 17:40:48 +02:00
``` yaml
markdown_extensions:
- footnotes
```
2021-10-04 23:36:31 +02:00
See additional configuration options:
- [Footnotes]
2021-10-04 23:36:31 +02:00
[Footnotes]: ../setup/extensions/python-markdown.md#footnotes
2020-07-20 17:40:48 +02:00
2024-01-24 09:45:24 +01:00
### Footnote tooltips :material-alert-decagram:{ .mdx-pulse title="Added on January 24, 2024" }
<!-- md:sponsors -->
<!-- md:version insiders-4.51.0 -->
<!-- md:flag experimental -->
[Insiders] allows to render footnotes as inline tooltips, so the user can read
the footnote without leaving the context of the document. Footnote tooltips can
be enabled in `mkdocs.yml` with:
``` yaml
theme:
features:
- content.footnote.tooltips
```
__Footnote tooltips are enabled on our documentation__, so to try it out, you
can just hover or focus any footnote on this page or any other page of our
documentation.
[Insiders]: ../insiders/index.md
2020-07-20 17:40:48 +02:00
## Usage
### Adding footnote references
A footnote reference must be enclosed in square brackets and must start with a
caret `^`, directly followed by an arbitrary identifier, which is similar to
the standard Markdown link syntax.
``` title="Text with footnote references"
2020-07-20 17:40:48 +02:00
Lorem ipsum[^1] dolor sit amet, consectetur adipiscing elit.[^2]
```
<div class="result" markdown>
2020-07-20 17:40:48 +02:00
Lorem ipsum[^1] dolor sit amet, consectetur adipiscing elit.[^2]
</div>
2020-07-20 17:40:48 +02:00
### Adding footnote content
The footnote content must be declared with the same identifier as the reference.
It can be inserted at an arbitrary position in the document and is always
rendered at the bottom of the page. Furthermore, a backlink to the footnote
reference is automatically added.
#### on a single line
Short footnotes can be written on the same line:
2020-07-20 17:40:48 +02:00
``` title="Footnote"
2020-07-20 17:40:48 +02:00
[^1]: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
```
<div class="result" markdown>
2020-07-20 17:40:48 +02:00
2021-10-11 13:38:03 +02:00
[:octicons-arrow-down-24: Jump to footnote](#fn:1)
2020-07-20 17:40:48 +02:00
</div>
2020-07-20 17:40:48 +02:00
[^1]: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
#### on multiple lines
Paragraphs can be written on the next line and must be indented by four spaces:
2020-07-20 17:40:48 +02:00
``` title="Footnote"
2020-07-20 17:40:48 +02:00
[^2]:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
massa, nec semper lorem quam in massa.
```
<div class="result" markdown>
[:octicons-arrow-down-24: Jump to footnote](#fn:2)
</div>
2020-07-20 17:40:48 +02:00
2021-10-04 23:36:31 +02:00
[^2]:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus
auctor massa, nec semper lorem quam in massa.