Support footnotes in live preview

Feature requests
1

Currently, footnotes are rendered properly only in read mode. Also, their link can’t be clicked in live preview mode.

Thank you.

11 Likes
2

Seconded, strongly. In my experience, Live Preview very quickly became the standard mode for working in Obsidian. I’d go so far as to say that footnotes not rendering essentially makes them a non-feature, simply because the links don’t exist.

I find footnotes are a great way to organize links to external resources, especially on a first pass. They uniquely afford an inline link in the note text, while allowing ease of scanning the (possibly annotated) separate list of footnote references. This is lighter weight than kicking out a separate note for each reference, which in my use case is either 1) sufficient for many cases where a separate note isn’t warranted or 2) a great first pass before I do break out each reference into a separate note. But I find that I’m incredibly reluctant to use them, since they don’t render or function as expected.

1 Like
3

Same here.

4

I fully support this feature too ! Clickable footnotes with automatic numbering in live preview is a must have for an knowledge app in my opinion.

5
7

They’re not clickable, and it only works for manually numbered footnotes (i.e. putting [^4] after your text, but this snippet should allow footnotes to display like you’d expect them to look in live preview mode:

div:not(.cm-active) > span.cm-footref.cm-hmd-barelink,
div:not(.cm-active) > span.cm-footref.cm-hmd-barelink-end {
    color: var(--link-color);
    font-size: 0.75rem;
    padding-left: 0.1rem;
}

div:not(.cm-active) > span.cm-formatting-link {
    display: none;
}

Change the font-size variable to scale them to your desired size, and remove the colour line if you want them to be the same colour as the text.

8

Note: this snippet currently hides unselected square brackets everywhere. This is not a problem for links, since they’re hidden automatically, but is a problem if you’re using them for omissions in quotes or code. I’ll post an update when I figure out how to fix this behaviour.