@fsegurai/marked-extended-footnote v15.2.3

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.