Markdown Footnotes: How to Add Footnotes in Mar...

Footnotes let you add references, citations, or extra information without cluttering your main text. Here's how to use them in Markdown.

Basic Footnote Syntax

Here is a sentence with a footnote.[^1]

[^1]: This is the footnote content.

Result: Here is a sentence with a footnote.¹

The footnote appears at the bottom of the document.

Step-by-Step Guide

1. Add the Reference in Your Text

Use [^identifier] where you want the footnote number to appear:

The research shows significant results.[^study1]

2. Define the Footnote Content

Anywhere in your document (usually at the bottom), add:

[^study1]: Smith et al., 2024. Journal of Examples.

3. The Result

Markdown processors automatically:

Number footnotes sequentially
Link the reference to the footnote
Place footnotes at the document end

Footnote Examples

Simple Footnote

Markdown was created by John Gruber.[^1]

[^1]: In collaboration with Aaron Swartz in 2004.

Named Footnotes

Use descriptive names for easier management:

The study found positive outcomes.[^smith2024]

[^smith2024]: Smith, J. (2024). Research findings. Science Journal.

Multiple Footnotes

First point[^1] and second point[^2] are both important.

[^1]: Explanation of the first point.
[^2]: Explanation of the second point.

Multi-line Footnotes

Indent continuation lines with spaces or tabs:

Complex topic here.[^detailed]

[^detailed]: This is a longer footnote that spans
    multiple lines. Just indent the continuation
    with spaces or a tab.
    
    You can even include multiple paragraphs.

Footnotes with Links

See the documentation.[^docs]

[^docs]: Official docs at [example.com](https://example.com)

Footnotes with Code

Use the function carefully.[^code]

[^code]: Example: `console.log("hello")`

Platform Support

Platform	Footnotes Supported
GitHub	✅ Yes
GitLab	✅ Yes
Obsidian	✅ Yes
Notion	❌ No (use toggle blocks)
Jekyll	✅ Yes (with kramdown)
Hugo	✅ Yes
Gatsby	✅ Yes (with plugin)
VS Code Preview	✅ Yes (with extension)
Typora	✅ Yes

Inline Footnotes

Some processors support inline footnotes (shorter syntax):

Here is an inline footnote.^[This is the footnote content.]

Note: Inline footnotes have less universal support than the standard [^ref] syntax.

Best Practices

1. Use Descriptive Identifiers

Instead of numbers, use meaningful names:

❌ [^1], [^2], [^3]
✅ [^citation1], [^definition], [^source]

2. Group Footnotes at the End

Keep your document organized:

# My Document

Content with references.[^ref1] More content.[^ref2]

---

## References

[^ref1]: First reference details.
[^ref2]: Second reference details.

3. Keep Footnotes Concise

Long explanations are better as regular paragraphs or separate sections.

4. Don't Over-Use Footnotes

Too many footnotes interrupt reading flow. Consider:

Parenthetical notes for brief additions
A references section for citations
Inline links for sources

Common Issues

Footnotes Not Rendering

Cause: Your Markdown processor doesn't support footnotes.

Solutions:

Check processor documentation
Use a plugin or extension
Switch to a processor with native support

Footnote Numbers Out of Order

Cause: Markdown numbers footnotes by order of appearance, not definition order.

Solution: Rearrange your [^ref] references in the text.

Duplicate Footnote IDs

Cause: Using the same identifier twice.

❌ Wrong:
Text[^1] and more text[^1]  <!-- Same ID used twice -->

✅ Correct:
Text[^1] and more text[^2]  <!-- Unique IDs -->

Styling Footnotes

CSS for Web

/* Footnote reference in text */
.footnote-ref {
  font-size: 0.75em;
  vertical-align: super;
}

/* Footnote section */
.footnotes {
  font-size: 0.9em;
  border-top: 1px solid #ccc;
  margin-top: 2em;
  padding-top: 1em;
}

Return Links

Most processors add a ↩ link to return from the footnote to the text. This is automatic in GitHub-flavored Markdown.

Alternatives to Footnotes

Inline Parentheses

For brief notes:

The results were significant (p < 0.05).

Reference Links

For citations:

According to [Smith, 2024][1], the findings show...

[1]: https://example.com/study

Endnotes Section

Manual references section:

## Notes

1. First note content
2. Second note content

Converting Documents with Footnotes

When you convert Markdown to other formats:

To PDF

Most converters (Pandoc, etc.) preserve footnotes properly.

To HTML

Footnotes become anchor links with automatic navigation.

To DOCX

Pandoc converts Markdown footnotes to Word footnotes.

Tools for Footnotes

Editors with good footnote support:

Obsidian
Typora
VS Code with Markdown Preview Enhanced
iA Writer

Converters:

Pandoc (universal document converter)
Marked 2 (Mac)

FAQ

Do footnotes work on GitHub?

Yes, GitHub-flavored Markdown supports footnotes natively.

Can I use footnotes in README files?

Yes, GitHub renders footnotes in README.md files.

How do I number footnotes manually?

You can't force specific numbers. Markdown auto-numbers based on appearance order. Use descriptive identifiers instead.

Can footnotes contain images?

Technically yes, but it's not recommended. Images make footnotes too heavy. Use regular paragraphs instead.

Quick Reference

Simple footnote:
Text with note.[^1]
[^1]: Note content.

Named footnote:
Text with note.[^myref]
[^myref]: Note content.

Inline footnote (limited support):
Text with note.^[Inline note content.]

Multi-line footnote:
[^multiline]: First line
    Indented continuation
    More content

Summary

Basic syntax:

Reference: [^identifier]
Definition: [^identifier]: Content

Best practices:

Use descriptive identifiers
Keep footnotes concise
Group definitions at document end

Supported on:

GitHub, GitLab, Obsidian, Jekyll, Hugo, and most modern Markdown processors