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.
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.
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.
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
Improved CSS is here
div:not(.CodeMirror-activeline) > .CodeMirror-line .cm-hmd-barelink {
font-size: 0;
}div:not(.CodeMirror-activeline) > .CodeMirror-line .cm-hmd-barelink::after {
content: 'â';
font-size: 0.7rem;
opacity: 50%;
}
div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-formatting.cm-formatting-link.cm-link.cm-hmd-barelink {
display:none;
}
line not active
line active
NOW ITS BETTER
try this too ; much more clean
div:not(.CodeMirror-activeline) > .CodeMirror-line .cm-hmd-barelink {
font-size: 0;
}
div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-formatting.cm-formatting-link.cm-link.cm-hmd-barelink {
display:none;
}
.cm-hmd-barelink {
font-size:0.9rem;
vertical-align: super;
}
Note active line
Active line
work like charm along with better footnotes
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?
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)
No, it doesnât.
Steps to reproduce
- Add an inline footnote by using
text^[footnote text]
- Add internal link to footnote
text^[footnote [[cool link]] text]
- 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
Login status: not logged in
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
4: Admonition
5: Latex Environments
6: Better Word Count
7: Extended MathJax
8: Advanced Tables
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.
Additional information
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.
@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
@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!