Inline footnote css

Share & showcase
1

Hope this helps for somebody

1 Like
2

this is much more clean for inline foot note css
Hope it helps for sombody

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
image

Active line
image

work like charm along with better footnotes

3

Thanks for sharing, but for me it always displays the footnote, on active and inactive lines.

I’m on version 0.13.10.

Edit: This works on the latest insider version:

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

}

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

.cm-hmd-barelink {
font-size:0.9rem;
vertical-align: super;
}

Since this also effects all other single brackets like […] it would be probably good to include some indicator like you did before:

div:not(.cm-active.cm-line) > .cm-hmd-barelink::after {
  content: '🞷';
  font-size: 1rem;
  opacity: 45%;
}

This makes it quite cool for pandoc citations:

Bildschirmfoto 2021-12-17 um 16.02.10

Edit 2: This seems to cause some problems when there are italics or highlights in the footnotes. Then mutiple symbols are displayed. Not really sure how to fix this…