gatsby-remark-numbered-footnotes-patched
v1.0.2
Published
Replaces user-defined footnote strings with numbered references.
Downloads
191
Readme
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
yarn add gatsby-remark-numbered-footnotes
In gatsby-config.js
, add:
module.exports = {
plugins: [
{
resolve: 'gatsby-transformer-remark',
options: {
+ plugins: [
+ 'gatsby-remark-numbered-footnotes',
+ ],
},
},
],
};
Example Output
In Remark, it’s possible to add footnotes in Markdown like this:
This is normal body copy.[^also] It includes a couple footnotes.[^thing]
[^also]:
This is a footnote.
[^thing]:
This is another footnote.
By default, this will generate the following HTML:
<p>
This is normal body copy.
<sup id="fnref-also">
<a href="#fn-also" class="footnote-ref">also</a>
</sup>
It includes a couple footnotes.
<sup id="fnref-thing">
<a href="#fn-thing" class="footnote-ref">thing</a>
</sup>
</p>
<div class="footnotes">
<hr>
<ol>
<li id="fn-also">
<p>This is a footnote.</p>
<a href="#fnref-also" class="footnote-backref">↩</a>
</li>
<li id="fn-thing">
<p>This is another footnote.</p>
<a href="#fnref-thing" class="footnote-backref">↩</a>
</li>
</ol>
</div>
With gatsby-remark-numbered-footnotes
, the markup will change to:
<p>
This is normal body copy.
- <sup id="fnref-also">
+ <sup id="fnref-1">
- <a href="#fn-also" class="footnote-ref">also</a>
+ <a href="#fn-1" class="footnote-ref">1</a>
</sup>
It includes a couple footnotes.
- <sup id="fnref-thing">
+ <sup id="fnref-2">
- <a href="#fn-thing" class="footnote-ref">thing</a>
+ <a href="#fn-2" class="footnote-ref">2</a>
</sup>
</p>
<div class="footnotes">
<hr>
<ol>
- <li id="fn-also">
+ <li id="fn-1">
<p>This is a footnote.</p>
- <a href="#fnref-also" class="footnote-backref">↩</a>
+ <a href="#fnref-1" class="footnote-backref">↩</a>
</li>
- <li id="fn-thing">
+ <li id="fn-2">
<p>This is another footnote.</p>
- <a href="#fnref-thing" class="footnote-backref">↩</a>
+ <a href="#fnref-2" class="footnote-backref">↩</a>
</li>
</ol>
</div>