# markdown-it-footnote

> Footnotes for markdown-it markdown parser.

Latest version **4.0.0** (published 2023-12-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install markdown-it-footnote
pnpm add markdown-it-footnote
yarn add markdown-it-footnote
bun add markdown-it-footnote
```

## Health

**Score 38/100 (D)** — status: abandoned.

Positive: has types package; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 4.0.0 |
| Published | 2023-12-06 |
| First published | 2015-01-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/markdown-it-footnote) |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 45.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 247 |
| Maintainers | vitaly |
| Keywords | markdown-it-plugin, markdown-it, markdown, footnotes |

## Links

- npm: https://www.npmjs.com/package/markdown-it-footnote
- Repository: https://github.com/markdown-it/markdown-it-footnote
- Homepage: https://github.com/markdown-it/markdown-it-footnote#readme
- Issues: https://github.com/markdown-it/markdown-it-footnote/issues
- npm.io page: https://npm.io/package/markdown-it-footnote

## Alternatives

- [@mdxeditor/editor](https://npm.io/package/@mdxeditor/editor.md) — 962.4K weekly downloads
- [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads
- [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads
- [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads
- [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads

## Recent versions

- 4.0.0 (latest) — 2023-12-06
- 3.0.3 — 2021-05-20
- 3.0.2 — 2019-07-09
- 3.0.1 — 2016-08-05
- 3.0.0 — 2016-06-27
- 2.0.0 — 2015-10-05
- 1.0.0 — 2015-03-12
- 0.1.0 — 2015-01-04

## README

# markdown-it-footnote

[![CI](https://github.com/markdown-it/markdown-it-footnote/actions/workflows/ci.yml/badge.svg)](https://github.com/markdown-it/markdown-it-footnote/actions/workflows/ci.yml)
[![NPM version](https://img.shields.io/npm/v/markdown-it-footnote.svg?style=flat)](https://www.npmjs.org/package/markdown-it-footnote)
[![Coverage Status](https://img.shields.io/coveralls/markdown-it/markdown-it-footnote/master.svg?style=flat)](https://coveralls.io/r/markdown-it/markdown-it-footnote?branch=master)

> Footnotes plugin for [markdown-it](https://github.com/markdown-it/markdown-it) markdown parser.

__v2.+ requires `markdown-it` v5.+, see changelog.__

Markup is based on [pandoc](http://johnmacfarlane.net/pandoc/README.html#footnotes) definition.

__Normal footnote__:

```
Here is a footnote reference,[^1] and another.[^longnote]

[^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.
```

html:

```html
<p>Here is a footnote reference,<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup> and another.<sup class="footnote-ref"><a href="#fn2" id="fnref2">[2]</a></sup></p>
<p>This paragraph won’t be part of the note, because it
isn’t indented.</p>
<hr class="footnotes-sep">
<section class="footnotes">
<ol class="footnotes-list">
<li id="fn1"  class="footnote-item"><p>Here is the footnote. <a href="#fnref1" class="footnote-backref">↩</a></p>
</li>
<li id="fn2"  class="footnote-item"><p>Here’s one with multiple blocks.</p>
<p>Subsequent paragraphs are indented to show that they
belong to the previous footnote. <a href="#fnref2" class="footnote-backref">↩</a></p>
</li>
</ol>
</section>
```

__Inline footnote__:

```
Here is an inline note.^[Inlines notes are easier to write, since
you don't have to pick an identifier and move down to type the
note.]
```

html:

```html
<p>Here is an inline note.<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup></p>
<hr class="footnotes-sep">
<section class="footnotes">
<ol class="footnotes-list">
<li id="fn1"  class="footnote-item"><p>Inlines notes are easier to write, since
you don’t have to pick an identifier and move down to type the
note. <a href="#fnref1" class="footnote-backref">↩</a></p>
</li>
</ol>
</section>
```


## Install

node.js, browser:

```bash
npm install markdown-it-footnote --save
bower install markdown-it-footnote --save
```

## Use

```js
var md = require('markdown-it')()
            .use(require('markdown-it-footnote'));

md.render(/*...*/) // See examples above
```

_Differences in browser._ If you load script directly into the page, without
package system, module will add itself globally as `window.markdownitFootnote`.


### Customize

If you want to customize the output, you'll need to replace the template
functions. To see which templates exist and their default implementations,
look in [`index.js`](index.js). The API of these template functions is out of
scope for this plugin's documentation; you can read more about it [in the
markdown-it
documentation](https://github.com/markdown-it/markdown-it/blob/master/docs/architecture.md#renderer).

To demonstrate with an example, here is how you might replace the `<hr>` that
this plugin emits by default with an `<h4>` emitted by your own template
function override:

```js
const md = require('markdown-it')().use(require('markdown-it-footnote'));

md.renderer.rules.footnote_block_open = () => (
  '<h4 class="mt-3">Footnotes</h4>\n' +
  '<section class="footnotes">\n' +
  '<ol class="footnotes-list">\n'
);
```

Here's another example that customizes footnotes for epub books:

```js
const backrefLabel = 'back to text';

const epubRules = {
  footnote_ref: ['<a', '<a epub:type="noteref"'],
  footnote_open: ['<li', '<li epub:type="footnote"'],
  footnote_anchor: ['<a', `<a aria-label="${backrefLabel}"`],
}

Object.keys(epubRules).map(rule => {
  let defaultRender = md.renderer.rules[rule];
  md.renderer.rules[rule] = (tokens, idx, options, env, self) => {
    return defaultRender(tokens, idx, options, env, self).replace(...epubRules[rule]);
  }
})
```

## License

[MIT](https://github.com/markdown-it/markdown-it-footnote/blob/master/LICENSE)

---
_Source: https://npm.io/package/markdown-it-footnote · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._