logo
Examples / Footnotes
Source

Footnotes

Footnote references and definitions powered by the markedFootnote extension. Bidirectional linking between references and definitions.

Component Renderers

The built-in FootnoteRef and FootnoteSection components render superscript links and a numbered definition list with back-links.

Editor

719 characters

Preview

Footnotes

Footnotes let you add references without cluttering the main text.

Here is a statement1 that needs a citation. You can also use named footnotesnote for clarity.

Multiple references2 can appear throughout the document, and they all link to the definitions at the bottom.

Technical Writing

When documenting APIs, footnotesapi help explain edge cases without breaking the flow of the main content.

  1. This is the first footnote with a numeric identifier. ↩

  2. Named footnotes use descriptive identifiers instead of numbers. ↩

  3. Multiple footnotes are collected into a single section at the end. ↩

  4. API footnotes can reference external documentation or implementation details. ↩

Component Renderer Code

Usage

<script lang="ts">
  import SvelteMarkdown from '@humanspeak/svelte-markdown'
  import type { RendererComponent, Renderers }
    from '@humanspeak/svelte-markdown'
  import {
    markedFootnote, FootnoteRef, FootnoteSection
  } from '@humanspeak/svelte-markdown/extensions'

  const source = 'A statement[^1] with a citation.\n\n[^1]: The citation.'

  interface FootnoteRenderers extends Renderers {
    footnoteRef: RendererComponent
    footnoteSection: RendererComponent
  }

  const renderers: Partial<FootnoteRenderers> = {
    footnoteRef: FootnoteRef,
    footnoteSection: FootnoteSection
  }
</script>

<SvelteMarkdown
  {source}
  extensions={[markedFootnote()]}
  {renderers}
/>

FootnoteRef + FootnoteSection

<!-- FootnoteRef.svelte (built-in) -->
<script lang="ts">
  interface Props { id: string }
  const { id }: Props = $props()
</script>

<sup class="footnote-ref">
  <a href="#fn-{id}" id="fnref-{id}">{id}</a>
</sup>

<!-- FootnoteSection.svelte (built-in) -->
<script lang="ts">
  interface Footnote { id: string; text: string }
  interface Props { footnotes: Footnote[] }
  const { footnotes }: Props = $props()
</script>

<section class="footnotes" role="doc-endnotes">
  <ol>
    {#each footnotes as { id, text } (id)}
      <li id="fn-{id}">
        <p>
          {text}
          <a href="#fnref-{id}"
             class="footnote-backref">↩</a>
        </p>
      </li>
    {/each}
  </ol>
</section>