Martin Hähnel

How To Add Footnotes To Eleventy

Changelog

Note

The following won't work if you write your posts in something else than markdown! Kinda obvious, but I just thought I'd point that out.

An easy way to add footnotes[1] to Eleventy is to use an existing plugin for markdown-it, which is what Eleventy uses internally to parse markdown.

Add markdown-it-footnote to your project

npm install markdown-it-footnote --save

Add markdown-it-footnote to your eleventy.config.js

// ...
import footnote_plugin from 'markdown-it-footnote';
// ...

export default async function(eleventyConfig) {
  //...
  eleventyConfig.amendLibrary("md", (mdLib) => mdLib.use(footnote_plugin));
  //...
};

Use footnotes in your blog posts

An easy way to add footnotes[^1]...

[^1]: Like this one.

You can also do a pandoc-style inline-footnote[2] instead.

You can also do a pandoc-style inline-footnote^[Like this.] instead.

P.S.: In order to make these examples, I had to use Eleventy's highlighter plugin (that's a plugin for Eleventy, not markdown-it!) and use its nunjucks custom tag, since markdown-it-footnote parsed all the footnotes in the codeblock, too - which of course defeated the purpose. If that is ever something you need to do (showing some markdown syntax without it getting parsed), it works like this:

Hello I'm markdown that is parsed by markdown-it.
{% highlight "markdown" %}
And I'm not parsed.[^1]
[^1]: So footnote syntax is visible.
{% endhighlight %}
And now this markdown would be parsed normally again.

P.P.S.: In order to make the nunjucks custom tags visible in the last example we had to use the escape tags:

{% raw %}{% highlight/endhighlight %}{% endraw %}

P.P.P.S: And that last one used a markdown tripple backtick codeblock with doubled raw/endraw tags, so that those would become visible. Okay okay. I'll stop there... Finally, here's the official Eleventy documentation on how to add your own plugins to markdown-it.

  1. Like this one. ↩︎

  2. Like this. ↩︎