Footnotes

dactl uses Barefoot plugin to create nice looking inline footnotes from those generated by kramdown, daktl’s markdown processor. Read on for more information about how to add footnotes to your posts and how to enable/disable Barefoot plugin.

What is Barefoot.js

I really like the look of inline-footnotes created by Bigfoot.js but it requires jQuery and loading whole library just to have footnotes seems excessive.

I found Barefoot.js when looking for an alternative an it does exactly what it says:

Barefoot is a lightweight Bigfoot.js alternative written in vanilla Javascript to create beautiful inline footnotes.
Barefoot grabs the common markup used for footnotes on the web, mostly generated by Markdown processors, and transform it into beautiful and meaningful footnotes.

For dactl’s purposes I have modified Barefoot’s default stylesheet:

How to add footnotes to your posts

Adding footnotes to your posts is really easy.1
First, you need to insert a numbered footnote mark in your post to define where it should show up - it looks like this:

class="highlight">
1
Adding footnotes to your posts is really easy.[^1]

Then, to put some content in those those numbered footnotes, you need to define it at the bottom of your post, like this:

class="highlight">
1
[^1]: Here's one for example

How to turn off Barefoot plugin

Open _config.yml file and change value in blog.footnotes_inline from true to false.
Restart your jekyll server and see the change in this post.

  1. Here’s one for example 

this should contain a proper description written by Your Name