Tips and Tricks

Littlefoot Footnotes

Create popup footnotes in your Ghost site's posts and pages. This script enables this through the Header and Footer injections in the Ghost admin settings...

Jen Wallace

• 2 min read
littlefoot.js
Footnotes without the footprint.
littlefoot

First Footnote 1

Second Footnote 2

  1. This is what is in the first inline footnote bubble...

  2. This is what is in the second inline footnote bubble...

Below you can see the contents of the HTML Card used in the Post Editor... (you can copy and save this for re-use in the editor as a Code Snippet)

First Footnote <a href="#fn:1" id="fnref:1">1</a>

Second Footnote <a href="#fn:2" id="fnref:2">2</a>

<div class="footnotes"><hr><ol>
    
<li class="footnote" id="fn:1"><p>
              
This is what is in the first inline footnote bubble...
              
</p></li>
    
<li class="footnote" id="fn:2"><p>
    
This is what is in the second inline footnote bubble...
    
</p></li></ol></div>

To make this work, put this in your Site Header Code Injection...

<link
  rel="stylesheet"
  href="https://unpkg.com/littlefoot/dist/littlefoot.css"
/>

...and put this in your Site Footer Code Injection...

<script
  src="https://unpkg.com/littlefoot/dist/littlefoot.js"
  type="application/javascript"
></script>
<script type="application/javascript">
  littlefoot.littlefoot() // Pass any littlefoot settings here.
</script>

And for reference, here below is a screenshot of the Site Header and Footer Code injections in your admin settings to enable Littlefoot Footnotes in your posts and pages...

There is also this...

Footnotes with ease
Ghost doesn’t have native footnotes. There are some options for using Markdown or HTML cards, but none of them meet my standards. Here’s my solution, which uses Littlefoot. How to use in the editor: 1. To mark the footnote notation, type something like [[X]] pretty much anywhere in the post.
Cathy SariskyCathy Sarisky