Support for inline footnotes in live preview

[gandalfsaxe]

Support of inline footnotes would be a very welcome addition.

Example of ordinary/inline footnotes

1. Source markdown:

   
   Here is a footnote reference,[^1] and another.[^longnote]

[^1]: Here is the footnote.

[^longnote]: Here's one with multiple blocks.

Here is an inline note.^[Inlines notes are easier to write, since you don't have to pick an identifier and move down to type the note.]

2. Typora live preview:
<img width="408" alt="image" src="https://user-images.githubusercontent.com/12127864/41719855-93c9843a-7561-11e8-91fe-e610a49c37fc.png">

3. The result of inline footnotes is the same when converted to .tex:
```latex
Here is a footnote reference,\footnote{Here is the footnote.} and
another.\footnote{Here's one with multiple blocks.}

Here is an inline note.\footnote{Inlines notes are easier to write,
  since you don't have to pick an identifier and move down to type the
  note.}

4. ..and also the same as pdf:

So inline footnotes are simply more convenient to use in situations where the output is intended to be LaTeX or PDF. Would be great if they could be rendered in superscript similar to ordinary footnotes.

[swelet]

I agree. This would make a great improvement to old school markdown footnotes.

[abnerlee]

merge into #2448

[abnerlee]

relates #912

[jcarpenter]

Huge +1 for this. I use inline footnotes heavily, and would love if they collapsed into the same excellent "footnote hover button" UI that non-inline footnotes get.

[jcarpenter]

In the meantime I rolled my own solution by styling mark tags.

[DutchPete]

@jcarpenter : I use footnotes a lot too. I don't get how @GandalfSaxe would work/be rendered, but I'll wait for @abnerlee's reply/solution.

Meanwhile, I am interested in your workaround, but cannot follow your lightening-fast GIF. Could you expand on those styling mark tags and how to get those footnotes or fn tags? How does it translate into a footnote? Or does it translate into an inline note?

I apologise for being dense and asking what are perhaps a silly questions.

[jcarpenter]

@DutchPete . Good questions! Yep, they translate into real inline footnotes eventually. It's a bit convoluted. The details:

When editing in Typora, whenever I want an inline footnote, I use a ==...== mark tag instead.

I use mark tags because 1) most importantly, Typora recognizes them, and therefore gives us the hooks to style them, and 2) I don't need actual marks in my workflow, so I'm free to use the element for something else. First I have to enable support for mark tags in Preferences > Markdown > Highlight.

I style marks with the following CSS in a custom theme

This is simplified quite a bit. The actual rules have a ton of additional aesthetic-only properties.

/* Mark when NOT selected */
/* Collapses to just `fn` */

mark {
    position: relative;
    cursor: text;
}

mark::before {
    font-size: 0.9em;
    content: 'fn'; /* Display an "fn" */
}

mark span {
    display: none; /* Hide the actual content */
}

/* Mark when hovered */
/* Displays contents in bubble, centered below the mark */

span:not(.md-expand) mark:hover span {
    position: absolute;
    transform: translate(-50%, 100%);
    bottom: -0.4em;
    left: 50%;
    z-index: 100;
}

/* Footnote when selected */
/* Displays editable contents inline */

.md-expand mark {
    font-size: inherit;
    padding: 0;
    margin: 0;
    background-color: rgba(0, 0, 0, 0);
    color: inherit;
    cursor: text;
}

.md-expand mark::before { content: none; }
.md-expand mark span { display: inline; }

I replace marks with inline footnotes

When I'm ready to export my notes for public consumption, I run everything through a node export script. It runs a bunch of simple regex replace functions to modify image paths, inject metadata, etc. One method replaces the marks with inline footnotes, while leaving the contents intact:

let post = fs.readFileSync('sealevelrise.md', 'utf8')
post = post.replace(/==\[/gm, '^[[')
post = post.replace(/\]==/gm, ']]')

The export script then runs the file through node-pandoc, to replace citation keys with actual references. It then writes a new Markdown file to disk, so the original is untouched, and a Bash script finally pushes everything to a GitHub repo.

I convert everything to HTML and publish

My static site generator setup (I use 11ty.io), pulls down the formatted files from the repo, and converts everything to HTML. The end result is seen below. I use a bunch of styles and a bit of JS to create a similar "hover footnotes" user experience.

The site's not live yet, mind you.

[DutchPete]

@jcarpenter : wow Josh, that's impressive. Thanks a lot.

[DutchPete]

Typora's footnotes are not meant to be clicked on to take you to the bottom of the page to be read. Instead, you hover over them and the footnote (written at the bottom of the page, nevertheless) is shown as a tooltip.

For those who are interested to have footnotes you click on, get an automatic scroll to the bottom of the page, then click on a little return arrow to get back to the point of departure, this works in Typora:

in body text: Text bla bla <sup name="a1">[1](#f1)</sup> ​in footnote: <b name="f1">1</b> Footnote content here. [↩](#a1)

You can see the little return arrow is included in the footnote syntax.

[DutchPete]

@GandalfSaxe : thanks for the tip. I did some research and understand your message now. If ever @abnerlee gets around to implement it, 1 important point that needs to be included is that Typora ensures the sequential numbering of footnotes is kept intact. Right now, if you have footnote 1 and footnote 2, then want to insert footnote 3 between 1 and 2, Typora shows them in that order, i.e. 1, 3, 2. That is not acceptable for a text that will be published.

I am sure you are aware of this, my comment is meant as a reminder for @abnerlee if/when he takes this on board.

[loyukfai]

An accompanied improvement in inserting footnote would be welcome too.

e.g. When you click "footnote" (or via custom shortcut), the program will insert a blank [^ ] tag at the cursor, and the user can enter the link or by auto-numerical, and the program will then add another [^ ] at the end of the document for inserting the actual footnote.

This is a behaviour I found useful in another Markdown editor.

[keelancook]

Just stopping by to show my support for this feature. After using Typora for a bit, and paying for the license, it's a strong tool for writing and solves many of my issues using markdown to write academic work. I'm a fan so far. However, the single biggest quality of life improvement I see for my use case is footnote management.

I believe inline footnotes would solve my problem completely. I used the inline syntax described above ^[...] in other editors and it's just great when you are drafting and revisiting content with many footnotes. Writing research for publication, I add paragraphs and footnotes throughout the process, and that presently means manually renumbering every footnote downstream every time something is added or moved.

Then, as long as the LaTeX export with Pandoc formats those as notes in a .tex file, my issue would be solved.