remark-inline-footnote

remark plugin to support for Obsidian-style inline footnotes.

Install

This package is ESM only. In Node.js (version 16+), install with npm:

npm install remark-inline-footnote

In Deno with esm.sh:

import gfmInlineFootnote from "https://esm.sh/remark-inline-footnote@1";

In browsers with esm.sh:

<script type="module">
	import gfmInlineFootnote from "https://esm.sh/remark-inline-footnote@1?bundle";
</script>

Use

Say our document example.md contains:

Venus is the second planet^[See [Wikipedia](https://en.wikipedia.org/wiki/Venus).] from the sun.

…and our module example.js contains:

import rehypeStringify from "rehype-stringify";
import remarkGfm from "remark-gfm";
import remarkInlineFootnote from "remark-inline-footnote";
import remarkParse from "remark-parse";
import remarkRehype from "remark-rehype";
import { read } from "to-vfile";
import { unified } from "unified";

const file = await unified()
	.use(remarkParse)
	.use(remarkGfm)
	.use(remarkInlineFootnote)
	.use(remarkRehype)
	.use(rehypeStringify)
	.process(await read("example.md"));

console.log(String(file));

…then running node example.js yields:

<p>Venus is the second planet<sup><a href="#user-content-fn-inline-0" id="user-content-fnref-inline-0" data-footnote-ref aria-describedby="footnote-label">1</a></sup> from the sun.</p>
<section data-footnotes class="footnotes"><h2 class="sr-only" id="footnote-label">Footnotes</h2>
<ol>
<li id="user-content-fn-inline-0">
<p>See <a href="https://en.wikipedia.org/wiki/Venus">Wikipedia</a>. <a href="#user-content-fnref-inline-0" data-footnote-backref="" aria-label="Back to reference 1" class="data-footnote-backref">↩</a></p>
</li>
</ol>
</section>

Alternatively we could convert to GFM if our module example2.js contains:

import remarkStringify from "remark-stringify";
import remarkGfm from "remark-gfm";
import remarkInlineFootnote from "remark-inline-footnote";
import remarkParse from "remark-parse";
import { read } from "to-vfile";
import { unified } from "unified";

const file = await unified()
	.use(remarkParse)
	.use(remarkGfm)
	.use(remarkInlineFootnote)
	.use(remarkStringify)
	.process(await read("example.md"));

console.log(String(file));

…then running node example2.js yields:

Venus is the second planet[^inline-0] from the sun.

[^inline-0]: See [Wikipedia](https://en.wikipedia.org/wiki/Venus).

API

This package exports no identifiers. The default export is remarkInlineFootnote.

unified().use(remarkInlineFootnote)

Add support for inline footnotes.

Returns

Nothing (undefined).

Security

Use of remark-inline-footnote does not involve rehype (hast) or user content so there are no openings for cross-site scripting (XSS) attacks.