A library of extended footnotes for Marked.js.

@fsegurai/marked-extended-footnote is an extension for Marked.js that adds support for extended footnotes, allowing the creation of footnotes with custom formatting and behavior. It supports any Markdown rendering and can be customized to fit your needs. Without the marked instance, it will have some limitations while rendering the content.

Table of contents

• Installation
• Usage
  • Basic Usage
  • Configuration Options
• More Resources
  • Available Extensions
  • Demo Application
• License

Installation

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

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

Usage

Basic Usage

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());
// marked.use(markedExtendedFootnote({
//   refMarkers: true, // Show [1] instead of just 1
//   labelFormat: (id, number) => {
//     const icons = {
//       source: '📚',
//       note: '📝',
//       warning: '⚠️',
//       explanation: '💡',
//     };
//     return id in icons ? icons[id as keyof typeof icons] : number; // [number / id]
//   },
// }));

const exampleMarkdown = `
This is a paragraph with a footnote reference[^1].

Here's another paragraph with a footnote[^4].

This statement needs a citation[^source].

This needs further explanation[^explanation].

This has an important caveat[^note].

## Custom Footnotes Section

[footnotes]

## Additional Content

This content appears after the footnotes.

[^1]: This is the first footnote.
[^4]: This is the second footnote with **bold** text.
[^source]: Smith, J. (2023). Research findings.
[^explanation]: This refers to the process described in section 2.1.
[^note]: Only applies under specific conditions.
`;

marked.parse(exampleMarkdown);

Configuration Options

The marked-extended-footnote extension accepts the following configuration options:

• prefixId: The prefix ID for footnotes. Defaults to 'fnref-'.
• description: The description of footnotes, used by aria-labelledby attribute. Defaults to 'Footnotes.'
• refMarkers: If set to true, it will place footnote reference in square brackets, like this: [1]. Defaults to false.
• backrefSymbol: Symbol used for backlinks from the footnote to the reference. Defaults to '↩.'
• backrefLinks: Whether to include backlinks from footnotes to references. Defaults to true.
• placeholderText: Custom placeholder text to specify where footnotes appear. Defaults to '[footnotes]'.
• labelFormat: Function to format the footnote label display. Defaults to (id, number) => number.

Available Extensions

| Extension | Package | Version | Description | |-------------|--------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------|--------------------------------------------------------| | Accordion | @fsegurai/marked-extended-accordion | | Add collapsible accordion sections to your markdown | | Alert | @fsegurai/marked-extended-alert | | Create styled alert boxes for important information | | Footnote | @fsegurai/marked-extended-footnote | | Add footnotes with automatic numbering | | Lists | @fsegurai/marked-extended-lists | | Enhanced list formatting options | | Spoiler | @fsegurai/marked-extended-spoiler | | Hide content behind spoiler tags | | Tables | @fsegurai/marked-extended-tables | | Advanced table formatting with cell spanning | | Tabs | @fsegurai/marked-extended-tabs | | Create tabbed content sections | | Timeline | @fsegurai/marked-extended-timeline | | Display content in an interactive timeline format | | Typographic | @fsegurai/marked-extended-typographic | | Improve typography with smart quotes, dashes, and more |

Demo Application

To see all extensions in action, check out the [DEMO].

To set up the demo locally, follow the next steps:

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

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

License

Licensed under MIT.