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:
- Adjusted the visuals a bit
- Footnote buttons show an icon, not a number
- Necessary changes to make it work with theme switcher
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:
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.
-
Here’s one for example ↩