This rehype plugin appends a custom postfix to footnotes, or changes the anchors/IDs to/from footnotes.

When you render several pieces of Markdown to HTML in a same webpage you might want to make sure that footnotes will not conflict between each piece of rendered HTML.

For instance:

• foo[^foo]
  
  [^foo]: Footnote :)

• bar[^foo]
  
  [^foo]: Conflict?

Rendering both of these will have the note next to bar link to Footnote :) instead of Conflict?, and Conflict? will have a link to go back to foo instead of bar.

This plugin plays well with remark-numbered-footnotes. Using remark-numbered-footnotes increases the risks of conflicts, hence the interest of postfixing footnote anchors.

npm:

npm install rehype-postfix-footnote-anchors

Dependencies:

const unified = require('unified')
const remarkParse = require('remark-parse')
const rehypePostfixFoonotes = require('rehype-postfix-footnote-anchors')
const stringify = require('rehype-stringify')
const remark2rehype = require('remark-rehype')

Usage:

unified()
  .use(reParse, {footnotes: true})
  .use(remark2rehype)
  .use(rehypePostfixFoonotes, postfix)
  .use(stringify)

In the above Usage example, postfix can be one of two things:

• a string: postfix = '-my-postfix'

  postfix will be appended to the existing footnotes identifiers

• a function: postfix = (identifier: string): string => 'foo' + identifier + 'bar'

  postfix will be called with the footnote identifier and should return a string

MIT © Zeste de Savoir