Footnote support

[AndrewHaglund]

It’d be awesome if markdown-it/footnote was supported by default in this project. I’m new to Eleventy (and web development in general) so it took me a while to figure out where to put it in my project to get it configured correctly.

[AndrewHaglund]

I think I just needed to add this to in my eleventy.config.js:

const markdownItFootnote = require("markdown-it-footnote");

Then in my modules.exports function (in eleventy.config.js):

eleventyConfig.amendLibrary("md", mdLib => {
	// footnotes
	const md = markdownIt({
		html: true,
		linkify: true,
	  })
	mdLib.use(require('markdown-it-footnote'));

	// hides brackets for footnotes
	mdLib.renderer.rules.footnote_caption = (tokens, idx) => {
		let n = Number(tokens[idx].meta.id + 1).toString();
	  
		if (tokens[idx].meta.subId > 0) {
		  n += ":" + tokens[idx].meta.subId;
		}
		return n;
	  };
});

Example on in one of my recent blog posts. My source code.

Goal: make a linkable footnote with [^1] and then at the bottom of the document [^1]: footnote text

[mikesplaces]

Hi. I would like to use this with the base blog now running 11ty 3.0. I get stuck after inserting the plugins. Could someone please show me how this should look with the current 11ty base blog?

[kartikynwa]

@mikesplaces This should go in the eleventy.config.js:

import markdownItFootnote from 'markdown-it-footnote';

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