# Live Preview: Add support for footnotes

I like to use footnotes like this: ^[https://obsidian.md/]
The problem is that they do not look good and disrupt the text when not using the reading mode. Therefore I would propose to shorten them to [x] in the Live Preview mode.

11 Likes

Temporary workaround: make the font of footnotes smaller and change the font color to a more subdued one. That way a footnote will distract you less? That’s what I do and find it helps.

there are 2 foot not plugins working very well together
pls check in community plugins

Thanks for the suggestion. “Footnote Shortcut” somehow does not work as described because it does not automatically create a footnote at the bottom when pressing the hotkey. “Better footnotes” might be a small improvement but not in the sense of my proposal. When using footnotes that directly contain the text, i. e. ^[www.example.com] it does not hide it in edit mode. And I think that way of using footnotes is preferable to using numbers because it allows me to add, remove and edit footnotes directly in-line without having to tidy up the references at the bottom.

1 Like

To add to my feature request: It would be nice if footnotes worked like links to notes, so that I could preview and jump to them in edit mode by holding Ctrl.

2 Likes

for me foot note shortcut and better foot note works very well together

i set Alt+X as shortcut and it automatically moves to bottom when pressed also moves back to content when pressed.
one thing to note though is there should be a line break before the foot note otherwise it wont work

your method will work great if things inside bracket are hidden while cursor is not there.
Hope somebody will find a way

hey tried some css to find a way and this kind of works but little tricky to edit though as selecting the text with mouse will act weird.
But could use keyboard

any way better than nothing

div:not(.CodeMirror-activeline) > .CodeMirror-line .cm-hmd-barelink:not(.cm-formatting) {
font-size: 0;

}


not active line

when line active

Hope this helps for the time being
put it in css snippet and activate

1 Like

Improved CSS is here

div:not(.CodeMirror-activeline) > .CodeMirror-line .cm-hmd-barelink {
font-size: 0;

content: '⚓';
font-size: 0.7rem;
opacity: 50%;

}
display:none;
}



line not active

line active

NOW ITS BETTER

2 Likes

try this too ; much more clean

div:not(.CodeMirror-activeline) > .CodeMirror-line .cm-hmd-barelink {
font-size: 0;

}

display:none;
}

font-size:0.9rem;
vertical-align: super;
}


Note active line

Active line

work like charm along with better footnotes

3 Likes

Thanks @ananthuthilakan! I have not messed with CSS in Obsidian so far. Your snippet is going in the direction I was imagining. The problem for me is that I am using footnotes mainly for hyperlinks which are not really usable when using your snippet. If you happen to know some way of modifying it so that hyperlinks are clickable, that would be awesome

At the present moment, it seems that footnotes are not working as it should in Live Preview. Using Footnote Shortcut plugin + Better Footnote doesn’t improve usage of this feature (The footnotes list doesn’t appear separately at the end of the note). The elements [^1] or ^[ ] are not hiding itself as we type. In the end, if I type manually, footnotes will work, but it still shows [^1], not [1] (in the text) like in Preview Mode.

Any thoughts?

1 Like

Following the post on the live preview formatting of external links in footnotes, it would be nice to have a proper support for footnotes in the live preview.

Links are not parsed in footnotes, appear highlighted wrong and are not clickable in either live preview or source mode. They work as expected in reading view.

Here’s the example code.

a [^1] b

[^1]: [hint](https://example.org)



@NomarCub if you do ⌘ (or ctrl) + click, does it not work?

No, it doesn’t.

### Steps to reproduce

1. Add an inline footnote by using text^[footnote text]
2. Add internal link to footnote text^[footnote [[cool link]] text]
3. New editor live preview highlighting breaks, see screenshot

### Expected result

The entire footnote should be highlighted (blue in my theme) and the link should be underlined and clickable (when holding ctrl). for this screenshot I just removed the actual link brackets

### Actual result

Here you can see the internal link shows the opening brackets, but not the closing brackets and after the link the footnote stops being highlighted.

### Environment

• Operating system: Linux (Manjaro)
• Debug info: SYSTEM INFO:
Obsidian version: v0.13.14
Installer version: v0.13.14
Insider build toggle: off
Live preview: on
Legacy editor: off
Base theme: dark
Community theme: Atom
Snippets enabled: 0
Safe mode: off
Plugins installed: 12
Plugins enabled: 10
1: Tag Wrangler
2: Paste URL into selection
3: Mind Map
5: Latex Environments
6: Better Word Count
7: Extended MathJax
9: Obsidian Charts
10: Excalidraw

RECOMMENDATIONS:
Custom theme: for cosmetic issues, please try to make the issue happen in the help vault or disable community theme and snippets.
Community plugins: for bugs, please try to make the issue happen in the help vault or disable community plugins.

Haven’t tested with manual footnotes inserted at the bottom, I barely use them because they’re a bit inconvenient.
It’s important to note that this is just an issue in the live preview, rendering the thing readonly in reading mode correctly highlights the link and takes the entire thing as footnote.

This issue also occurs with the default obsidian theme, not just my custom community one and I highly doubt any of the plugins interfere here.

1 Like

@tobi I have exactly the same problem and would support the feature request.

For me none of the proposed solutions worked so I also made a quick CSS snippet. Maybe it helps.

/* F O O T N O T E S */

/* beginning and end of footnote */
.cm-inline-footnote-start,
.cm-inline-footnote-end {
opacity: 0.5;
}

/* styling the footnote footnote */
.cm-inline-footnote-start,
.cm-inline-footnote-end,
.cm-inline-footnote {
color: #e88500;
font-size: 60%;
position: relative;
top: -4px;
}


Result:

It seems to work only if I separate the footnote from the text with a space character though.

This doesn’t work.^[footnote]

This works. ^[footnote]

Hope it helps

This doesn’t work.^[footnote]
This works. ^[footnote]

@litotitus thank you so much for this answer. Trying to make my own custom-css I was very puzzled, why in the HTML my footnotes appeared with a .cm-hmd-barelink.cm-link class (i.e. [...]) instead of a .cm-inline-footnote class.

Your comment solved this. However, I guess this blank space workaround needs to be considered a bug in live-preview, right? I mean it’s quite counter intuitive to use a blank space before a footnote, and in reading mode it gets correctly interpreted without it.

Oh, and regarding the feature request…

… personally I’d actually prefer, if the footnotes stayed inline also in live-preview. The reason is, that this helps me keeping the overview also of the content of all my footnotes. In the process of writing down a paragraph with multiple footnotes, jumping back and forth distracts me from writing (even with hyperlinks that work both ways!).

… however, I can also understand the benefits of the requested styling of the footnotes to be appended at the bottom. I think it very much depends on personal workflow and on the context. So once the paragraph has settled, I’d actually prefer to have the footnotes down there at the bottom of the document, too!

So what I suggest is a command to toggle between both views. And this being said: No! Switching between live-preview and reading mode is not an option for me, since it is about writing in both of the described workflows. So I would strongly opt for having both views accessible in live-preview. This would be awsome!