Getting the content of a footnote to the reference link

[arokanto]

I'm trying to make my references behave like in Wikipedia, where upon hovering a reference a layer appears showing the contents of the footnote without needing to click. This should be easy enough to do with CSS/JS, as long as there's a title attribute in the anchor tag.

Looking at the code, I can't figure out how I would override the footnote_ref function to print out the contents of the corresponding footnote to the anchor tag. It looks like the actual text after the opening footnote Pandoc tag does not get stored to env. Could be that I'm missing something though.

Is there a way to get the textual content of a specific footnote inside footnote_ref function?

[puzrin]

I understand what you wish, but don't understand your problem. If you claim some data may be missed - could you point exact lines what you speak about?

PS. Also, you can scan all tokens and change content as you wish.

[arokanto]

Let's say I have a markdown file that looks like this:

Body text. [^1]

[^1]: Footnote text

The above outputs to this:

<p>Body text. <sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup></p>
<hr class="footnotes-sep">
<section class="footnotes">
  <ol class="footnotes-list">
    <li id="fn1" class="footnote-item">
      <p>Footnote text. <a href="#fnref1" class="footnote-backref">↩︎</a></p>
    </li>
  </ol>
</section>

I use Eleventy, so I'm trying to override the footnote_ref function for the anchor link to include the title attribute like this:

markdownLib.renderer.rules.footnote_ref = (tokens, idx, options, env, slf) => {
  /*
    The console.log below returns an array of two Tokens, one for "Body text" and one for the footnote_ref.
    I would like to somehow access the "Footnote text", but I don't see how. I would then use that text to
    add the title attribute to the anchor tag.
  */
  console.log(tokens)

  var id      = slf.rules.footnote_anchor_name(tokens, idx, options, env, slf);
  var caption = slf.rules.footnote_caption(tokens, idx, options, env, slf);

  var refid   = id;
   if (tokens[idx].meta.subId > 0) {
    refid += ':' + tokens[idx].meta.subId;
  }

  return `
    <sup class="footnote-ref">
      <a title="TITLE_HERE" href="#fn${id}" id="fnref${refid}">${caption}</a>
    </sup>`;
}

None of parameters received by the footnote_ref function seem to include the "Footnote text". I can access the entire markdown by using console.log(env.collections.all[0].template.inputContent), but parsing the correct text from markdown input seems redundant.

If I'm reading the code correctly, it seems like this lib is only reading the start and end of a footnote, and not the content, but I could be wrong.

So my question is, is there a away to get the "Footnote text" inside the footnote_ref function?

[puzrin]

So my question is, is there a away to get the "Footnote text" inside the footnote_ref function?

I guess, you need to create plugin for core chain (after parse, but before render) find footnote content you need (from the end of page), and link it where you wish (to footnote reference tag). Then this will be accessible from renderer methods.

[arokanto]

Ok, thanks for pointing me to the right direction. I'll look into that.

[nielmond]

This is exactly what I'm trying to do -- even including the Eleventy part! I was struggling to find the right phrase to Google when I decided to browse the issues, and was amazed to find this as the one open issue!

@arokanto Did you get anywhere with this?

[arokanto]

Nope, sorry. I ended up just getting by without it.

[nielmond]

Ok, thanks for update. (The suggested approach does sound like more work than just working around it, in this case using the DOM in an eleventy transform.)

[azrsh]

@puzrin Can I take over this issue and work on it? If the changes discussed in this issue are acceptable for markdown-it-footnote, I'll create a PR.