@fsegurai/marked-extended-timeline v15.1.1

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.