Footnotes in Markdown

by @edent | , , | 2 comments | 350 words | Read ~333 times.

Did you know - WordPress Markdown supports footnotes1? There is some documentation but I thought I'd write a slightly more comprehensive guide.

The code is pretty simple. Write [^1] where you want your first footnote link to appear. Then, later in the document, write [^1]: The text of the note.

It doesn't matter what number you put inside the [^…], WordPress automatically generates a sequential number when displaying the links. For example, this one is [^3]2

In order to keep your thoughts straight while writing and editing, you can give your footnotes names - like [^fn about names]3. If you want, you can also use emoji4. When you click that link, the emoji should appear in your URl bar.

Similarly, you can write the footnote text next to where you want the link to appear. Something like:

Something like[^5] 
[^5]: See!

should work fine5.

Sadly6, there's no such thing as a <footnote> element7 in HTML

WordPress automagically puts the footnotes at the end of your page in this structure:

<div class="footnotes">
   <hr>
   <ol>
      <li id="fn-1234-1"> ... <a href="#fnref-1234-1">↩</a></li>
...

This means you can style the div and hr8. The number after fn- is the WordPress post ID.

There are a few other things to be aware of9, but they're pretty easy to use. No plugins required, no expensive themes. Just cool in-built functionality.

Enjoy!10


  1. Footnotes are hyperlinks which direct the user to some explanatory text. WordPress also automatically includes a link back to the text you were reading. 
  2. But to you, should look like 2. Magic! 
  3. The footnote link can contain spaces. Which is nifty. 
  4. Emoji? You've never heard of Emoji?! 
  5. See! 
  6. Well, it makes me sad... 
  7. Nor elephant 
  8. As I have so beautifully done here. 
  9. While they can't be recursive, a footnote can have its own footnote11 - if you think that would be useful. 
  10. You can also hide them if you want to be silly. 
  11. Just like Terry Pratchett! 

2 thoughts on “Footnotes in Markdown

  1. Neil Brown says:

    This is how I do image attributions on my blogs.

  2. I wish GitHub markdown supported this. ☹️

Leave a Reply

Your email address will not be published.

%d bloggers like this: