remark-footnotes

What is remark-footnotes?

The remark-footnotes package is a plugin for the remark Markdown processor that allows users to add footnotes to their Markdown documents. It provides a syntax to include footnotes in the text, which are then rendered as references within the document, typically at the bottom of the page.

What are remark-footnotes's main functionalities?

Footnote Definition

This feature allows users to define footnotes in their Markdown content. The code sample shows how to use the remark-footnotes plugin with the remark library to process a Markdown string that includes a footnote definition.

const remark = require('remark');
const footnotes = require('remark-footnotes');

remark()
  .use(footnotes, { inlineNotes: true })
  .process('Some text[^1].\n\n[^1]: This is a footnote.', function (err, file) {
    console.log(String(file));
  });

Inline Footnotes

This feature enables the use of inline footnotes, which are footnotes defined directly within the text. The code sample demonstrates how to enable inline footnotes using the remark-footnotes plugin.

const remark = require('remark');
const footnotes = require('remark-footnotes');

remark()
  .use(footnotes, { inlineNotes: true })
  .process('Some text^[This is an inline footnote].', function (err, file) {
    console.log(String(file));
  });

Other packages similar to remark-footnotes

markdown-it-footnote

markdown-it-footnote is a plugin for the markdown-it Markdown parser. It allows users to add footnotes to their Markdown documents in a similar way to remark-footnotes. The main difference is that markdown-it-footnote is designed to work with the markdown-it parser, while remark-footnotes is designed for the remark ecosystem.

README

remark-footnotes

remark plugin to add support for footnotes.

Important!

This plugin is affected by the new parser in remark (micromark, see remarkjs/remark#536). Use version 2 while you’re still on remark 12. Use version 3 for remark 13+.

Install

This package is ESM only: Node 12+ is needed to use it and it must be imported instead of required.

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 module, example.js, looks as follows:

import {readSync} from 'to-vfile'
import {unified} from 'unified'
import remarkParse from 'remark-parse'
import remarkFootnotes from 'remark-footnotes'
import remarkRehype from 'remark-rehype'
import rehypeFormat from 'rehype-format'
import rehypeStringify from 'rehype-stringify'

const file = readSync('example.md')

unified()
  .use(remarkParse)
  .use(remarkFootnotes, {inlineNotes: true})
  .use(remarkRehype)
  .use(rehypeFormat)
  .use(rehypeStringify)
  .process(file)
  .then((file) => {
    console.log(String(file))
  })

Now, running node example yields:

<p>
  Here is a footnote reference,<a href="#fn1" class="footnote-ref" id="fnref1" role="doc-noteref"><sup>1</sup></a>
  another,<a href="#fn2" class="footnote-ref" id="fnref2" role="doc-noteref"><sup>2</sup></a>,
  and optionally there are inline
  notes.<a href="#fn3" class="footnote-ref" id="fnref3" role="doc-noteref"><sup>3</sup></a>
</p>
<p>
  This paragraph won’t be part of the note, because it
  isn’t indented.
</p>
<section class="footnotes" role="doc-endnotes">
  <hr>
  <ol>
    <li id="fn1" role="doc-endnote">
      <p>Here is the footnote.<a href="#fnref1" class="footnote-back" role="doc-backlink">↩</a></p>
    </li>
    <li id="fn2" role="doc-endnote">
      <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="#fnref2" class="footnote-back" role="doc-backlink">↩</a>
      </p>
    </li>
    <li id="fn3" role="doc-endnote">
      <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="#fnref3" class="footnote-back" role="doc-backlink">↩</a>
      </p>
    </li>
  </ol>
</section>

API

This package exports no identifiers. The default export is remarkFootnotes.

unified().use(remarkFootnotes[, options])

Plugin to add support for footnotes.

options.inlineNotes

Whether to support ^[inline notes] (boolean, default: false). Passed to micromark-extension-footnote.

Notes

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

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-gfm — GitHub Flavored Markdown
• remark-frontmatter — Frontmatter (YAML, TOML, and more)
• remark-math — Math
• remark-github — Auto-link references like in GitHub issues, PRs, and comments

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