A library of extended typographic features for Marked.js.

@fsegurai/marked-extended-timeline is an extension for Marked.js that adds support for interactive timelines with chronological events that can include rich markdown content.

Table of contents

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

Installation

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

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

Usage

Basic Usage

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

import { marked } from "marked";
import markedExtendedTimeline from "@fsegurai/marked-extended-timeline";

// 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-timeline/lib/index.umd.js"></script>

marked.use(markedExtendedTimeline());

const exampleMarkdown = `
::::timeline
:::event{date="2023-01-15"}
# Product Launch
Initial release of our software with the following features:
- User authentication
- Basic dashboard
- File uploads
:::eventend

:::event{date="2023-06-10" active="true"}
# Version 2.0
Major architecture overhaul with improved performance
:::eventend

:::event{date="2023-12-01"}
# Year End Update
Planning for next year's roadmap
:::eventend
::::timelineend
`;

marked.parse(exampleMarkdown);

Aliases

The timeline block can be rendered using alternative aliases respectively for start and end block. Some of them are:

• Timeline Block

  • Start Aliases
    • :tl
    • :timeline
  • End Aliases
    • :tlend
    • :timelineend

• Timeline Event Block

  • Start Aliases
    • :ev
    • :event
  • End Aliases
    • :evend
    • :eventend

Configuration Options

You can customize the timeline behavior with several options:

// Default behavior (recommended)
marked.use(markedExtendedTimeline());

// With specific configuration
marked.use(
    markedExtendedTimeline({
        timelineClass: "custom-timeline-container", // Custom class for the timeline container
        eventClass: "custom-timeline-event", // Custom class for timeline events
        dateFormat: (date) => date.toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric" }), // Custom date formatter
        injectStyles: true, // Whether to inject default CSS
        customizeToken: (token) => {
            /* Customize token before rendering */
        },
    }),
);

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.