A library of extended footnotes for Marked.js.

@fsegurai/marked-extended-footnote is an extensions for Marked.js that adds support for extended footnotes.

Table of contents

• Installation
  • @fsegurai/marked-extended-footnote
  • Using Extended Footnotes
  • Available Extensions
  • Demo Application
• License

Installation

@fsegurai/marked-extended-footnote

To add @fsegurai/marked-extended-footnote along with Marked.js to your package.json use the following commands.

npm install @fsegurai/marked-extended-footnote marked@^15.0.0 --save

Using Extended Footnotes

Import @fsegurai/marked-extended-footnote and apply it to your Marked instance as shown below.

import { marked } from 'marked'
import markedExtendedFootnote from '@fsegurai/marked-extended-footnote'

// or UMD script
// <script src="https://cdn.jsdelivr.net/npm/marked/lib/marked.umd.js"></script>
// <script src="https://cdn.jsdelivr.net/npm/@fsegurai/marked-extended-footnote/lib/index.umd.js"></script>

marked.use(markedExtendedFootnote())

const exampleMarkdown = `
This is an inline footnote reference[^1].

[^1]: This is the footnote.

This is a block footnote reference[^2].

[^2]:
    This is the block footnote.
    It can contain multiple lines.
`

marked.parse(exampleMarkdown)

// Output:
// <p>This is an inline footnote reference<sup id="fnref:1"><a href="#fn:1" class="footnote-ref">1</a></sup>.</p>

// <p>This is a block footnote reference<sup id="fnref:2"><a href="#fn:2" class="footnote-ref">2</a></sup>.</p>

// <div class="footnotes">
//   <hr>
//   <ol>
//     <li id="fn:1">
//       <p>This is the footnote. <a href="#fnref:1" class="footnote-backref">↩</a></p>
//     </li>
//     <li id="fn:2">
//       <p>This is the block footnote. It can contain multiple lines. <a href="#fnref:2" class="footnote-backref">↩</a></p>
//     </li>
//   </ol>
// </div>

By default, this plugin does not place footnote markers in square brackets ([1]), instead like this: 1. 
So you will need to add the style as shown below to your CSS:

/* Marked Extended Footnotes to style links references */
[data-fnref-ref]::before {
  content: '[';
}

[data-fnref-ref]::after {
  content: ']';
}

Read the Marked.js documentation for more details about its usage.

Options

The marked-footnote extension accepts the following configuration options:

• prefixId: The prefix ID for footnotes. Defaults to 'fnref-'.
• description: The description of footnotes, used by aria-labeledby attribute. Defaults to 'Footnotes'.
• refMarkers: If set to true, it will place footnote reference in square brackets, like this: [1]. Defaults to false.

Available Extensions

• Marked Extended Footnote
• Marked Extended Lists
• Marked Extended Tables
• Marked Extended Typographic

Demo Application

To see all themes in action, check out the demo: https://fsegurai.github.io/marked-extensions.

To set up the demo locally:

git clone https://github.com/fsegurai/marked-extensions.git
npm install
npm start

This will serve the application locally at http://[::1]:8000.

License

Licensed under MIT.