Hiltmon

On walkabout in life and technology

Octopress Now Has Footnotes

If you update to the latest Octopress and you still use the rdiscount markdown processor, you now get footnotes like this 1. I was previously using a CSS workaround because I prefer the speed of rdiscount for my growing site2 and still wanted footnotes.

To create a footnote, use the standard MultiMarkdown [^1] anchor to create the footnote reference link, and add [^1]: The footnote content. to the bottom of the file3.

I also prefer my footnotes a tad smaller, lighter and closer together, so I added the following CSS to my sass/custom/_styles.css file:

1
2
3
4
5
6
7
8
9
.footnotes {
  font-size: 13px;
  line-height: 16px;
  color: #666;

  p {
    margin-bottom: 6px;
  }
}

If you prefer popover style footnotes (which I do not), try the Footnotes Popover by Matt Gemmell.

Follow the author as @hiltmon on Twitter and @hiltmon on App.Net. Mute #xpost on one.


  1. This is a footnote.

  2. If you had changed Markdown processors, you would have gotten footnotes sooner, but at the cost of significantly slower site generation speed. rdiscount is fast C code, the others are slower interpreted code.

  3. Bold and italics work here too.

Comments