Support footnotes in markdown text

[tgy]

Notebooks often need to omit details in the main text, but these details still need to be there somewhere. Footnotes are a perfect way to achieve this.

markdown-it does support footnotes. What's stopping us from having them in our Observable Framework notebooks? :)

Bonus point would be to have the possibility to have the footnotes on the right side of the notebook, or have them appear on mouseOver.

[Fil]

Are you thinking about this plugin? https://github.com/markdown-it/markdown-it-footnote

[tgy]

@Fil yes exactly!

[Fil]

If you want to play with this, MarkdownIt is called here with one plugin (markdown-it-anchor): https://github.com/observablehq/framework/blob/main/src/markdown.ts#L424

[mbostock]

Maybe we could have a way to register markdown-it plugins in the config file?

[huw]

👍 to custom markdown-it plugins, that would make supporting Wikilinks a lot easier. And other non-standard but common Markdown extensions like $ for TeX blocks.

[Fil]

After #965 you can install the markdown-it-footnote manually, and tweak the styles to make it look good. We're also reporting good results with markdown-it-container.

[mbostock]

Live example: https://observablehq.observablehq.cloud/framework-example-markdown-it-footnote/

[tgy]

Works like a charm! Thanks a lot for addressing this feature request. @Fil Why did you re-open the issue?

[Fil]

I thought maybe something was missing… the emoji arrows don't look too good, do they?

[tgy]

Which emoji arrows? This is what I have

[mbostock]

It looks fine in macOS Safari, but in Chrome it renders as:

One probably needs to use the VS15 variation selector to prevent emoji presentation. I assume that’s an option with the markdown-it-footnote plugin?

Edit: Looks like markdown-it-footnote already uses VS15, so it’s just Chrome that’s ignoring it. 😞