gatsby-remark-numbered-footnotes

This is a plugin for gatsby-transformer-remark that converts footnote reference links to sequential numbers.

It’s a lightweight wrapper around remark-numbered-footnotes to make it work with Gatsby.

Installation

1yarn add gatsby-remark-numbered-footnotes

In gatsby-config.js, add:

1  module.exports = {
2    plugins: [
3      {
4        resolve: 'gatsby-transformer-remark',
5        options: {
6+         plugins: [
7+           'gatsby-remark-numbered-footnotes',
8+         ],
9        },
10      },
11    ],
12  };

Example Output

In Remark, it’s possible to add footnotes in Markdown like this:

1This is normal body copy.[^also] It includes a couple footnotes.[^thing]
2
3[^also]:
4  This is a footnote.
5
6[^thing]:
7  This is another footnote.

By default, this will generate the following HTML:

1<p>
2  This is normal body copy.
3  <sup id="fnref-also">
4    <a href="#fn-also" class="footnote-ref">also</a>
5  </sup>
6  It includes a couple footnotes.
7  <sup id="fnref-thing">
8    <a href="#fn-thing" class="footnote-ref">thing</a>
9  </sup>
10</p>
11<div class="footnotes">
12  <hr>
13  <ol>
14    <li id="fn-also">
15      <p>This is a footnote.</p>
16      <a href="#fnref-also" class="footnote-backref">↩</a>
17    </li>
18    <li id="fn-thing">
19      <p>This is another footnote.</p>
20      <a href="#fnref-thing" class="footnote-backref">↩</a>
21    </li>
22  </ol>
23</div>

With gatsby-remark-numbered-footnotes, the markup will change to:

1  <p>
2    This is normal body copy.
3-   <sup id="fnref-also">
4+   <sup id="fnref-1">
5-     <a href="#fn-also" class="footnote-ref">also</a>
6+     <a href="#fn-1" class="footnote-ref">1</a>
7    </sup>
8    It includes a couple footnotes.
9-   <sup id="fnref-thing">
10+   <sup id="fnref-2">
11-     <a href="#fn-thing" class="footnote-ref">thing</a>
12+     <a href="#fn-2" class="footnote-ref">2</a>
13    </sup>
14  </p>
15  <div class="footnotes">
16    <hr>
17    <ol>
18-     <li id="fn-also">
19+     <li id="fn-1">
20        <p>This is a footnote.</p>
21-       <a href="#fnref-also" class="footnote-backref">↩</a>
22+       <a href="#fnref-1" class="footnote-backref">↩</a>
23      </li>
24-     <li id="fn-thing">
25+     <li id="fn-2">
26        <p>This is another footnote.</p>
27-       <a href="#fnref-thing" class="footnote-backref">↩</a>
28+       <a href="#fnref-2" class="footnote-backref">↩</a>
29      </li>
30    </ol>
31  </div>