Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
markdown-it-footnote
Advanced tools
Readme
Footnotes plugin for markdown-it markdown parser.
v2.+ requires markdown-it
v5.+, see changelog.
Markup is based on pandoc 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:
<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:
<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>
node.js, browser:
npm install markdown-it-footnote --save
bower install markdown-it-footnote --save
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
.
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
. 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.
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:
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:
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]);
}
})
FAQs
Footnotes for markdown-it markdown parser.
The npm package markdown-it-footnote receives a total of 160,943 weekly downloads. As such, markdown-it-footnote popularity was classified as popular.
We found that markdown-it-footnote demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.