@webdesigndecal/showdown-footnotes

Showdown Footnotes – 2.1.1

Simply footnotes for Showdown.

Install

I'd advise using this extension with something like browserify.

npm i --save showdown-footnotes

const converter = new showdown.Converter({ extensions: [footnotes] });

Usage

Some word or something that needs explaining[^1].

[^1]: The explanation.

That would look compile to this.

<p>Some word or something that needs explaining<a href="#footnote-1"><sup>[1]</sup></a>.</p>

<p><small class="footnote" id="footnote-1"><a href="#footnote-1"><sup>[1]</sup></a>: The explanation.</small></p>

Single Line Comments

Single line footnotes can be written over multiple lines like this:

[^1]: A single line
footnote

Multi Line Footnotes

Shownotes-footnotes also supports multiline footnotes. You'll just need to indent the lines following the superscript.

[^5]:
  This is a paragraph.

  _That_ is another paragraph which is still within the same footnote.

Multiline footnotes are wrapped in a <div> instead of a <small>.

<div class="footnote" id="footnote-5">
  <a href="#footnote-5"><sup>[5]</sup></a>:
  <p>This is a paragraph.</p>
  <p><em>That</em> is another paragraph which is still within the same footnote.</p>
</div>

Backlinking

WDD's fork supports backlinking! Clicking on a footnote annotation will take you to a footnote's text, as expected, and clicking on the footnote index next to a footnote's text will take you back to the footnote annotation.