Using Pandoc style footnotes in Eleventy

Up until recently this blog was generated by Hugo. A few weeks ago I decided to jump on the bandwagon and switch to Eleventy. All posts were already written in Markdown so the conversion was fairly pain free.

In the process I had missed that footnotes were broken on these two pages. I don't use footnotes very often but thought it would be nice for them to work again.

I remembered that the version of Hugo I started out with, uses Blackfriday to process Markdown^[1]. Blackfriday supports Pandoc style footnotes.

Eleventy uses markdown-it to process Markdown files. It is possible to configure markdown-it by using your own instance using Eleventy's configuration API.

There is a plugin for Markdown-it called markdown-it-footnote that also uses Pandoc style footnotes.

Here is the relevant part of the configuration.

// .eleventy.js

const markdownIt = require('markdown-it');
const markdownItFootnote = require('markdown-it-footnote');

module.exports = (eleventyConfig) => {
  eleventyConfig.setLibrary('md', markdownIt().use(markdownItFootnote));
  // more settings
};

As can be seen below. Footnotes are working once again :)

Thanks Michael for proofreading.