1 | # markdown-it-footnote
|
2 |
|
3 | [![Build Status](https://img.shields.io/travis/markdown-it/markdown-it-footnote/master.svg?style=flat)](https://travis-ci.org/markdown-it/markdown-it-footnote)
|
4 | [![NPM version](https://img.shields.io/npm/v/markdown-it-footnote.svg?style=flat)](https://www.npmjs.org/package/markdown-it-footnote)
|
5 | [![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)
|
6 |
|
7 | > Footnotes plugin for [markdown-it](https://github.com/markdown-it/markdown-it) markdown parser.
|
8 |
|
9 | __v2.+ requires `markdown-it` v5.+, see changelog.__
|
10 |
|
11 | Markup is based on [pandoc](http://johnmacfarlane.net/pandoc/README.html#footnotes) definition.
|
12 |
|
13 | __Normal footnote__:
|
14 |
|
15 | ```
|
16 | Here is a footnote reference,[^1] and another.[^longnote]
|
17 |
|
18 | [^1]: Here is the footnote.
|
19 |
|
20 | [^longnote]: Here's one with multiple blocks.
|
21 |
|
22 | Subsequent paragraphs are indented to show that they
|
23 | belong to the previous footnote.
|
24 | ```
|
25 |
|
26 | html:
|
27 |
|
28 | ```html
|
29 | <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>
|
30 | <p>This paragraph won’t be part of the note, because it
|
31 | isn’t indented.</p>
|
32 | <hr class="footnotes-sep">
|
33 | <section class="footnotes">
|
34 | <ol class="footnotes-list">
|
35 | <li id="fn1" class="footnote-item"><p>Here is the footnote. <a href="#fnref1" class="footnote-backref">↩</a></p>
|
36 | </li>
|
37 | <li id="fn2" class="footnote-item"><p>Here’s one with multiple blocks.</p>
|
38 | <p>Subsequent paragraphs are indented to show that they
|
39 | belong to the previous footnote. <a href="#fnref2" class="footnote-backref">↩</a></p>
|
40 | </li>
|
41 | </ol>
|
42 | </section>
|
43 | ```
|
44 |
|
45 | __Inline footnote__:
|
46 |
|
47 | ```
|
48 | Here is an inline note.^[Inlines notes are easier to write, since
|
49 | you don't have to pick an identifier and move down to type the
|
50 | note.]
|
51 | ```
|
52 |
|
53 | html:
|
54 |
|
55 | ```html
|
56 | <p>Here is an inline note.<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup></p>
|
57 | <hr class="footnotes-sep">
|
58 | <section class="footnotes">
|
59 | <ol class="footnotes-list">
|
60 | <li id="fn1" class="footnote-item"><p>Inlines notes are easier to write, since
|
61 | you don’t have to pick an identifier and move down to type the
|
62 | note. <a href="#fnref1" class="footnote-backref">↩</a></p>
|
63 | </li>
|
64 | </ol>
|
65 | </section>
|
66 | ```
|
67 |
|
68 |
|
69 | ## Install
|
70 |
|
71 | node.js, browser:
|
72 |
|
73 | ```bash
|
74 | npm install markdown-it-footnote --save
|
75 | bower install markdown-it-footnote --save
|
76 | ```
|
77 |
|
78 | ## Use
|
79 |
|
80 | ```js
|
81 | var md = require('markdown-it')()
|
82 | .use(require('markdown-it-footnote'));
|
83 |
|
84 | md.render(/*...*/) // See examples above
|
85 | ```
|
86 |
|
87 | _Differences in browser._ If you load script directly into the page, without
|
88 | package system, module will add itself globally as `window.markdownitFootnote`.
|
89 |
|
90 |
|
91 | ## License
|
92 |
|
93 | [MIT](https://github.com/markdown-it/markdown-it-footnote/blob/master/LICENSE)
|