myst-spec/dist/examples/footnotes.yml

MyST schema, testcases, and typescript types

cases:
  - title: Basic footnotes
    id: footnote
    mdast:
      type: root
      children:
        - type: paragraph
          children:
            - type: text
              value: Here's a simple footnote,
            - type: footnoteReference
              identifier: '1'
              label: '1'
            - type: text
              value: " and here's a longer one."
            - type: footnoteReference
              identifier: bignote
              label: bignote
        - type: footnoteDefinition
          identifier: '1'
          label: '1'
          children:
            - type: paragraph
              children:
                - type: text
                  value: This is the first footnote.
        - type: footnoteDefinition
          identifier: bignote
          label: bignote
          children:
            - type: paragraph
              children:
                - type: text
                  value: Here's one with multiple paragraphs and code.
            - type: paragraph
              children:
                - type: text
                  value: Indent paragraphs to include them in the footnote.
            - type: paragraph
              children:
                - type: inlineCode
                  value: '{ my code }'
            - type: paragraph
              children:
                - type: text
                  value: Add as many paragraphs as you like.
    myst: |-
      Here's a simple footnote,[^1] and here's a longer one.[^bignote]

      [^1]: This is the first footnote.

      [^bignote]: Here's one with multiple paragraphs and code.

          Indent paragraphs to include them in the footnote.

          `{ my code }`

          Add as many paragraphs as you like.
    html: |-
      <p>Here's a simple footnote,<sup><a href="#m-fn-1" id="m-fnref-1" data-footnote-ref aria-describedby="footnote-label">1</a></sup> and here's a longer one.<sup><a href="#m-fn-bignote" id="m-fnref-bignote" data-footnote-ref aria-describedby="footnote-label">2</a></sup></p>
      <section data-footnotes class="footnotes">
        <h2 id="footnote-label" class="sr-only">Footnotes</h2>
        <ol>
          <li id="m-fn-1">
            <p>This is the first footnote. <a href="#m-fnref-1" data-footnote-backref class="data-footnote-backref" aria-label="Back to content">↩</a></p>
          </li>
          <li id="m-fn-bignote">
            <p>Here's one with multiple paragraphs and code.</p>
            <p>Indent paragraphs to include them in the footnote.</p>
            <p><code>{ my code }</code></p>
            <p>Add as many paragraphs as you like. <a href="#m-fnref-bignote" data-footnote-backref class="data-footnote-backref" aria-label="Back to content">↩</a></p>
          </li>
        </ol>
      </section>