Skip to content

Instantly share code, notes, and snippets.

@sivartravis
Forked from murtaugh/auto-footnote.js
Last active September 19, 2017 21:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sivartravis/1989fbed06b0bb9ff1d4ed3a58e39b41 to your computer and use it in GitHub Desktop.
Save sivartravis/1989fbed06b0bb9ff1d4ed3a58e39b41 to your computer and use it in GitHub Desktop.
Sniff out superscripts that should be footnote links
$('sup[data-footnote]').each(function(index) {
noteCount = $(this).html();
$(this).html('<a id="ref' + noteCount + '" href="#note' + noteCount + '">' + noteCount + '</a>');
$('#footnotes li').eq(noteCount - 1).attr('id', 'note' + noteCount).prepend('<a href="#ref' + noteCount + '">' + noteCount + '.</a> ');
});
The footnote indicator looks like this.<sup data-footnote>1</sup>
A second one looks like this.<sup data-footnote>2</sup>
The script expects the footnotes to look like this; it could be UL or OL, up to you, just know
the script prepends the count to the LI, so use CSS to hide the native bullets:
<ul id="footnotes">
<li>Footnote text for the first one.</li>
<li>Footnote text for the second one.</li>
</ul>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment