markdown-it-popover-notes

Native HTML popover footnotes for markdown-it markdown parser. Based on markdown-it-footnote.

Based on markdown-it-footnote, which you should probably use with custom render methods instead.

Markup is based on pandoc definition.

Usage Examples

Normal Footnotes

Input:

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

[^1]: Here is the footnote.

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

    Subsequent paragraphs are indented to show that they belong to the previous footnote.

        { some.code }

    The whole paragraph can be indented, or just the first line. In this way, multi-paragraph footnotes work like multi-paragraph list items.

This paragraph won’t be part of the note, because it isn’t indented.

Output:

<p>Here is a footnote reference,<sup><button popovertarget="ref-1">[1]</button></sup> and another.<sup><button popovertarget="ref-2">[2]</button></sup></p>
<p>This paragraph won’t be part of the note, because it isn’t indented.</p>
<section id="popover-footnotes">
  <aside id="ref-1" popover="auto">
    <p>Here is the footnote.</p>
  </aside>
  <aside id="ref-2" popover="auto">
    <p>Here’s one with multiple blocks.</p>
    <p>Subsequent paragraphs are indented to show that they belong to the previous footnote.</p>
    <pre><code>{ some.code }</code></pre>
    <p>The whole paragraph can be indented, or just the first line. In this way, multi-paragraph footnotes work like multi-paragraph list items.</p>
  </aside>
</section>

Inline Footnotes

Input:

Here is an inline note^[Inlines notes are easier to write.] with some text after.

Output:

<p>Here is an inline note<sup><button popovertarget="ref-1">[1]</button></sup> with some text after.</p>
<section id="popover-footnotes">
  <aside id="ref-1" popover="auto">
    <p>Inlines notes are easier to write.</p>
  </aside>
</section>

Installation

Install markdown-it-popover-notes from npm with your favorite package manager.

Usage

import MarkdownIt from "markdown-it";
import popoverNotesPlugin from "markdown-it-popover-notes";

const md = MarkdownIt();
md.use(popoverNotesPlugin);

const html = md.render("Footnotes are cool, but popovers are cooler.^[Popovers are cooler because they don't make the page move!]");

Styling

Without a little CSS, the popovers float in the middle of the screen instead of appearing next to the superscript reference. Below are some minimal styles to get you started. There is a more detailed example in styling-sample.html.

button[popovertarget] {
  background: unset;
  border: unset;
  color: LinkText;
  cursor: pointer;
}

[popover] {
  position-area: block-start;
  position-try-fallbacks: flip-block flip-inline;
  margin: 0.5rem;
  padding: 0.5rem;
  inset: auto;
}