Using Footnotes and Sidenotes

This post demonstrates two ways to add supplementary information to your writing: footnotes and sidenotes.

#Standard Footnotes

Footnotes use the standard GFM (GitHub Flavored Markdown) syntax¹. They're great for citations, references, or tangential thoughts that would interrupt the main flow.

You can have multiple footnotes in a paragraph², and they'll be numbered automatically. The content appears at the bottom of the article.

Here's another example with a longer footnote³.

#Sidenotes (Tufte-style)

For a more elegant approach, use sidenotes†Sidenotes appear in the margin on wide screens, or inline on mobile. They're inspired by Edward Tufte's book design.. They keep supplementary content visible without requiring the reader to scroll.

Sidenotes work especially well for definitions†Like when you introduce a technical term that some readers might not know., asides, and commentary that enhances but doesn't interrupt.

#When to Use Each

Use footnotes when:

• Citing sources
• Adding lengthy explanations
• Content that's purely optional

Use sidenotes when:

• Adding context readers might want immediately
• Providing definitions or clarifications
• Making witty asides†Like this one.

#Technical Details

Both approaches work seamlessly:

1. Footnotes use [^1] syntax and are processed by remark-gfm
2. Sidenotes use the <Sidenote> component in MDX

<!-- Footnote syntax -->
Some text[^1].
 
[^1]: The footnote content.
 
<!-- Sidenote syntax -->
Some text<Sidenote number={1}>The sidenote content.</Sidenote>.