remark-footnotes

[]build []coverage []downloads []size []collective []collective []chat

remark plugin to add support for footnotes.

Install

npm:

npm install remark-footnotes

Use

Say we have the following file, example.md:

Here is a footnote reference,[^1]
another,[^longnote],
and optionally there are inline
notes.^[you can type them inline, which may be easier, since you don’t
have to pick an identifier and move down to type the note.]

[^1]: Here is the footnote.

[^longnote]: Here’s one with multiple blocks.

    Subsequent paragraphs are indented to show that they
belong to the previous footnote.

        { some.code }

    The whole paragraph can be indented, or just the first
    line.  In this way, multi-paragraph footnotes work like
    multi-paragraph list items.

This paragraph won’t be part of the note, because it
isn’t indented.

And our script, example.js, looks as follows:

var vfile = require('to-vfile')
var unified = require('unified')
var markdown = require('remark-parse')
var remark2rehype = require('remark-rehype')
var format = require('rehype-format')
var html = require('rehype-stringify')
var footnotes = require('remark-footnotes')

unified()
  .use(markdown)
  .use(footnotes, {inlineNotes: true})
  .use(remark2rehype)
  .use(format)
  .use(html)
  .process(vfile.readSync('example.md'), function (err, file) {
    if (err) throw err
    console.log(String(file))
  })

Now, running node example yields:

<p>
  Here is a footnote reference,<sup id="fnref-1"><a href="#fn-1" class="footnote-ref">1</a></sup>
  another,<sup id="fnref-longnote"><a href="#fn-longnote" class="footnote-ref">longnote</a></sup>,
  and optionally there are inline
  notes.<sup id="fnref-2"><a href="#fn-2" class="footnote-ref">2</a></sup>
</p>
<p>
  This paragraph won’t be part of the note, because it
  isn’t indented.
</p>
<div class="footnotes">
  <hr>
  <ol>
    <li id="fn-1">
      <p>Here is the footnote.<a href="#fnref-1" class="footnote-backref">↩</a></p>
    </li>
    <li id="fn-longnote">
      <p>Here’s one with multiple blocks.</p>
      <p>
        Subsequent paragraphs are indented to show that they
        belong to the previous footnote.
      </p>
      <pre><code>{ some.code }
</code></pre>
      <p>
        The whole paragraph can be indented, or just the first
        line. In this way, multi-paragraph footnotes work like
        multi-paragraph list items.<a href="#fnref-longnote" class="footnote-backref">↩</a>
      </p>
    </li>
    <li id="fn-2">
      <p>
        you can type them inline, which may be easier, since you don’t
        have to pick an identifier and move down to type the note.<a href="#fnref-2" class="footnote-backref">↩</a>
      </p>
    </li>
  </ol>
</div>

API

remark().use(footnotes[, options])

Plugin to add support for footnotes.

options.inlineNotes

Whether to support ^[inline notes] (boolean, default: false).

Notes

• Labels, such as [^this] (in a footnote reference) or [^this]: (in a footnote definition) cannot contain whitespace
• Image and link references cannot start with carets, so ![^this doesn’t work][], and [^neither does this][]

Security

Use of remark-footnotes does not involve rehype (hast) or user content so there are no openings for cross-site scripting (XSS) attacks.

Related

• remark-breaks — More breaks
• remark-frontmatter — Frontmatter (yaml, toml, and more) support
• remark-github — References to issues, PRs, comments, users, etc
• remark-math — Inline and block math

Contribute

See contributing.md in remarkjs/.github for ways to get started. See support.md for ways to get help.

This project has a code of conduct. By interacting with this repository, organization, or community you agree to abide by its terms.

License

MIT © Titus Wormer