Bigfoot.js
The Bigfoot.js library is a jQuery plugin that takes standard form HTML encoded Footnotes and turns them into a much more useful format1 for reading. We wrote a simple plugin for Grav to make using it easier.
How to use in Grav
Making Bigfoot.js work in Grav
There's lots of ways to add this to Grav but I decided to make life easier (for us and you), so as we'll be using this in a few new app sites over the next little while I've created a Grav plugin and put it up on GitHub (and soonish it will be in the GPM so you can install it from your Grav Admin/Plugins screen).
In the meantime if you're familiar with the manual installation and configuration of Grav plugins just grab the latest release from Github. Your user configuration file for the Bigfoot.js plugin should look like this
user/config/plugins/bigfoot-js.yaml
enabled: true
include_jquery: false
auto_bigfootjs: trueConfiguration
Right now there's only two2 options, the first is to enable automatic detection of Markdown Extra style footnotes and add Bigfoot.js to the page when it does detect them. I recommend leaving this On right now as it won't work without being turned on3.
The second option is to include jQuery, this defaults to off. You probably won't need this as most themes include jQuery and the Grav core includes it as well, but if you use a theme that doesn't load jQuery into your pages this will add it for you.
Creating Footnotes in Markdown
Everyone know that Grav supports Markdown4, but did you know it supports Markdown Extra?
Amongst other things Markdown Extra provides support for Footnotes! 😃
If you didn't, login to your Grav websites Admin area and go to Configuration->System and turn on Markdown Extra.
For the hardcore types, in user/config/system.yaml set the markdown: âž” extra: to true, the section should look like this:
markdown:
extra: true
auto_line_breaks: false
auto_url_links: false
escape_markup: false
special_chars:
'>': gt
'<': ltFootnote Syntax
The syntax for adding footnotes is suitably simple… in the Markdown style:
This is some text with a footnote at the end.[^1]
[^1]: And this is the footnote.Footnotes can contain a reasonable range of content56 and like any good footnote system you don't have to keep them in order (one can be after two for example). In fact most markdown will work in a footnote, here the markdown for the last two:
[^6]: You've already seen:
* links
* text styling
* and now lists
[^7]: It also support images… Bugs
If you find any problems please open a New Issue on GitHub, or even better fork the project and create a Pull Request with your bugfix/new feature.
To do…
This is the first release so the feature set is limited, I'll be adding to it once I get a bit more time, things like:
- settings for controlling the footnote mark option (right now its the default elipses 7)
- the ability to add your own CSS styling to your theme for automatic overriding of the default style
- and controls for changing the other options in Bigfoot.js
-
You place your footnote marker using square brackets, a circumflex and a digit like so:
[^1]~ obviously the number increments with each footnote. At the end of your markdown document you place the actual footnote content using this syntax:[1]: A footnote goes here↩ -
Well three if you count the Grav standard Enable/Disable option for the plugin. ↩
-
This will change when I add support for enabling it from the frontmatter of a page. ↩
-
Created by @gruber of Daring Fireball and The Talk Show fame, Markdown has spread like wildfire. ↩
-
You've already seen:
- links
- text styling
- and now lists
-
It also support images…
↩ -
… ↩