As I said at the end of a previous post, I had planned to figure out the footnote formatting for this blog. I am an academic at heart, after all, and if there’s one thing academics love, it’s footnotes.1 After some finagling, I’ve figured out something that works for me, and since the people2 are clamoring to know my secrets, here they are.

As I’ve mentioned, this site is now generated using Hugo, rather than Jekyll, which I’d used in the past. One of the nice things about the Markdown engine Hugo uses (blackfriday) supports Multi-Markdown footnotes (see here for details). By default, this inserts the footnote reference in superscript, and then a horizontal rule and the content at the bottom of the post.

That’s all well and good, but it’s not quite fancy enough for me. I’ve always been enamored of the footnotes on Marco Arment’s blog, so the obvious solution was to steal them. He uses something called bigfoot.js, which is mostly good.3 The bigfoot defaults aren’t great, though: the three dots are opaque and hard-to-understand, and by default it removes the footnotes from the document.

To get around that, I had to modify a bunch of the CSS, and change the button markup to get rid of the three-dot thing. Here’s that code (the button markup is gross, but such is life writing JavaScript):

    actionOriginalFN: "ignore",
    activateOnHover: true,
    deleteOnUnhover: true,
    numberResetSelector: "",
    buttonMarkup: (
        '<div class="bigfoot-footnote__container">' +
        ' <button href="#" class="bigfoot-footnote__button" rel="footnote"' +
        ' id="{{`{{`}}SUP:data-footnote-backlink-ref}}"' +
        ' data-footnote-number="{{`{{`}}FOOTNOTENUM}}"' +
        ' data-footnote-identifier="{{`{{`}}FOOTNOTEID}}"' +
        ' alt="See Footnote {{`{{`}}FOOTNOTENUM}}"' +
        ' data-bigfoot-footnote="{{`{{`}}FOOTNOTECONTENT}}">' +
        ' {{`{{`}}FOOTNOTENUM}}' +
        ' </button>' +
        ' </div>'

And that’s all there is…tada! If you want to know more, you can see the source for this site at GitLab.

  1. Citation needed.
  2. Just Bryn, really.
  3. Warning: this site is bright red and hard on the retinas.

Tagged: news, software