@fsegurai/marked-extended-timeline

v17.0.0

Published

2 months ago

Extension for Marked.js that adds support for extended timelines, allowing the creation of interactive and visually appealing timelines within your Markdown content. It supports any Markdown rendering and can be customized to fit your needs.

0High
0Medium
0Low

fsegurai

extensions javascript library markdown markedjs marked-extended-timeline parser syntax typescript

An extension library for Marked.js to enhance Markdown rendering.

@fsegurai/marked-extended-timeline Extension for Marked.js that adds support for extended timelines, allowing the creation of interactive and visually appealing timelines within your Markdown content. It supports any Markdown rendering and can be customized to fit your needs.

🎯 Overview

The marked-extended-timeline extension transforms your Markdown into interactive, visually appealing timelines perfect for chronological content. Create professional timelines for project roadmaps, historical events, process flows, company milestones, product development, and any time-based narrative. With support for custom date formatting, active event highlighting, and rich nested Markdown content, it's ideal for documentation, presentations, and storytelling.

✨ Key Features

⏱️ Chronological Display: Vertical timeline with clear date progression
📅 Flexible Dates: Support for any valid date format (ISO, relative, custom)
⭐ Active Highlighting: Emphasize current or important events
📝 Rich Content: Full Markdown support including code, tables, images, lists
🎨 Customizable Styling: Multiple variants (default, centered, colorful)
🔧 Date Formatting: Custom date formatter functions
🎯 Visual Markers: Event dots with hover and active states
♿ Fully Accessible: Semantic HTML with proper structure
🌈 Dark Mode Ready: Complete theme support
📱 Responsive: Mobile-friendly layouts
🎭 Multiple Variants: Centered, colorful, compact styles
🔄 Nested Extensions: Works with other marked extensions

🎪 Live Demo

Experience all timeline styles and variants: View Demo

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@^17 --save

Usage

Basic Usage

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

Quick Start

Basic Concept

timeline is the identifier for the chronological timeline container, and event for individual timeline events with dates and content.

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());

### Installation

Install the package using your preferred package manager:

```bash
# Using Bun (recommended)
bun add @fsegurai/marked-extended-timeline

# Using npm
npm install @fsegurai/marked-extended-timeline

# Using yarn
yarn add @fsegurai/marked-extended-timeline

# Using pnpm
pnpm add @fsegurai/marked-extended-timeline

Basic Implementation

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

// Import styles (required for functionality)
import '@fsegurai/marked-extended-timeline/styles/timeline.css';
// Optional: Import theme for enhanced visuals
import '@fsegurai/marked-extended-timeline/styles/timeline-theme.css';

// Register the extension
marked.use(markedExtendedTimeline({
  dateFormat: (date) => {
    return date.toLocaleDateString('en-US', {
      year: 'numeric',
      month: 'long',
      day: 'numeric'
    });
  }
}));

// Your markdown content with timeline
const markdown = `
# Company Milestones 2025

## Our Journey This Year

::::timeline
:::event{date="2025-01-15" active="true"}
## Q1 2025 - Series A Funding

Successfully closed our Series A funding round!

**Highlights:**
- 💰 Raised $15M in funding
- 🤝 Led by Acme Ventures
- 📈 Company valuation: $75M
- 👥 Team size: 25 → 45 employees

**Key Investors:**
- Acme Ventures (Lead)
- TechStart Capital
- Innovation Partners
- Several angel investors

> "This funding will accelerate our product development and market expansion."
> — Sarah Chen, CEO

**Next Steps:**
1. Expand engineering team
2. Launch in 3 new markets
3. Scale infrastructure
:::eventend

:::event{date="2025-03-20"}
## Product Launch - v2.0

Major product release with game-changing features.

### New Features

| Feature | Description | Status |
|---------|-------------|--------|
| AI Assistant | Smart recommendations | ✅ Launched |
| Mobile Apps | iOS & Android | ✅ Launched |
| API v2 | RESTful API | ✅ Launched |
| Analytics Dashboard | Real-time insights | ✅ Launched |

### Technical Stack

\`\`\`javascript
// New architecture highlights
const stack = {
  frontend: 'React 18 + TypeScript',
  backend: 'Node.js + Express',
  database: 'PostgreSQL 15',
  cache: 'Redis 7',
  hosting: 'AWS (Multi-region)'
};
\`\`\`

**Performance Improvements:**
- ⚡ 60% faster load times
- 📊 10x better data processing
- 🔄 Real-time sync across devices

### User Reception
- 🌟 4.8/5 average rating
- 📈 50K+ downloads in first week
- 💬 300+ positive reviews
:::eventend

:::event{date="2025-06-01"}
## International Expansion

Launched in Europe and Asia!

**New Markets:**
1. 🇬🇧 **United Kingdom** - London HQ opened
2. 🇩🇪 **Germany** - Berlin office
3. 🇯🇵 **Japan** - Tokyo partnership
4. 🇸🇬 **Singapore** - APAC hub

**Localization:**
- 🌐 Translated to 12 languages
- 💱 Support for 25+ currencies
- 📞 24/7 multilingual support
- 🏛️ Local compliance & regulations

### Regional Teams

| Region | Team Size | Focus Areas |
|--------|-----------|-------------|
| Europe | 15 | Sales & Support |
| Asia | 12 | Partnerships |
| US (HQ) | 45 | Product & Engineering |

**Market Impact:**
- 📊 3x revenue growth in Q2
- 🌍 Active users in 50+ countries
- 🤝 Strategic partnerships established
:::eventend

:::event{date="2025-09-15"}
## 100K Users Milestone

Reached 100,000 active users worldwide! 🎉

### Growth Metrics

**User Acquisition:**
- January: 10K users
- March: 35K users
- June: 70K users
- September: 100K users

**Key Statistics:**
- 📱 65% mobile users
- 🌐 35% web users
- ⏱️ Avg. session: 23 minutes
- 📈 Weekly retention: 85%

**Top Use Cases:**
1. Project management (35%)
2. Team collaboration (28%)
3. Personal productivity (22%)
4. Educational (15%)

### Community Highlights
- 🎓 1,000+ tutorials created
- 💬 Active forum with 15K members
- 🎥 YouTube channel: 25K subscribers
- 📝 Blog: 100K monthly readers

> "Reaching 100K users is just the beginning. We're committed to building the best product for our community."
> — Michael Torres, Head of Growth
:::eventend

:::event{date="2025-12-20"}
## Year-End Achievements

An incredible year of growth and innovation!

### Annual Summary

**Financial Highlights:**
- 💰 Revenue: $12M (400% YoY growth)
- 📊 ARR: $18M
- 💵 Gross margin: 75%
- 🏦 Cash runway: 36 months

**Product Milestones:**
- 🚀 4 major releases
- ✨ 150+ new features
- 🐛 2,500+ bugs fixed
- ⚡ 99.97% uptime

**Team Growth:**
- 👥 Started: 25 employees
- 👥 Now: 68 employees
- 🌍 3 offices globally
- 🏆 10+ industry awards

**Customer Success:**
- ⭐ NPS Score: 72 (Excellent)
- 😊 Customer satisfaction: 94%
- 🔄 Churn rate: <2%
- 💝 100+ 5-star reviews

### Looking Ahead to 2026

**Q1 2026 Goals:**
1. Launch enterprise tier
2. AI-powered features
3. Mobile SDK for developers
4. Strategic partnerships
5. Series B funding round

[Read our full year-end report →](https://example.com/2025-report)
:::eventend
::::timelineend

---

**What's Next?** Follow our journey in 2026 as we continue to innovate and grow!
`;

// Parse and render
const html = marked.parse(markdown);
document.getElementById('content').innerHTML = html;

Syntax & Usage

Basic Timeline

Create a simple timeline with events:

::::timeline
:::event{date="2024-01-15"}
## First Event
Content for the first event.
:::eventend

:::event{date="2024-02-20"}
## Second Event
Content for the second event.
:::eventend

:::event{date="2024-03-10"}
## Third Event
Content for the third event.
:::eventend
::::timelineend

Active Event Highlighting

Mark important events with active="true":

::::timeline
:::event{date="2024-01-15"}
## Past Event
This already happened.
:::eventend

:::event{date="2024-06-20" active="true"}
## Current Event ⭐
This is the current focus!
:::eventend

:::event{date="2024-12-10"}
## Future Event
Coming soon...
:::eventend
::::timelineend

Rich Content in Events

Events support full Markdown:

::::timeline
:::event{date="2024-01-15" active="true"}
## Project Launch

We're excited to announce the **official launch** of our platform!

### Key Features

- ✅ Real-time collaboration
- ✅ Cloud storage
- ✅ Mobile apps

### Technical Stack

\`\`\`javascript
const stack = {
  frontend: 'React',
  backend: 'Node.js',
  database: 'MongoDB'
};
\`\`\`

### Metrics

| Metric | Value |
|--------|-------|
| Users | 1,000+ |
| Uptime | 99.9% |
| Speed | < 100ms |

> "This is a game-changer for our industry!"

[Learn more →](https://example.com)
:::eventend
::::timelineend

Date Formats

Dates can be in various formats:

::::timeline
:::event{date="2024-01-15"}
ISO format (YYYY-MM-DD)
:::eventend

:::event{date="2024-06-20"}
Another ISO date
:::eventend

:::event{date="2024-12-01"}
End of year event
:::eventend
::::timelineend

Short Aliases

Use shorter syntax:

:timeline
:event{date="2024-01-15"}
Content here
:eventend

:event{date="2024-02-20"}
More content
:eventend
:timelineend


The extension supports **nested Markdown content** within timeline events, including code blocks, tables, lists, images,
and other marked extensions. Each event can contain complex content while maintaining a clean chronological layout.

### Styling Your Timeline

This extension injects minimal structural CSS for layout. Visual styling is completely separated for maximum
flexibility.

#### Generated HTML Structure

```html

<div class="marked-extended-timeline-container">
    <div class="marked-extended-timeline-event" data-date="2023-01-15">
        <div class="marked-extended-timeline-date">2023-01-15</div>
        <div class="marked-extended-timeline-content">
            <h2>Event Title</h2>
            <p>Event description and content...</p>
        </div>
    </div>
    <div class="marked-extended-timeline-event active" data-date="2023-06-10">
        <!-- More events... -->
    </div>
</div>

CSS Classes Reference

| Class | Purpose | Element | |-------------------------------------------|---------------------------------|-----------------| | .marked-extended-timeline-container | Main wrapper with vertical line | Container | | .marked-extended-timeline-event | Individual event item | Event wrapper | | .marked-extended-timeline-event.active | Highlighted/current event | Active event | | .marked-extended-timeline-event::before | Event marker/dot | Pseudo-element | | .marked-extended-timeline-date | Date display | Date label | | .marked-extended-timeline-content | Event content area | Content wrapper |

Complete Styling Example

/* Timeline Container */
.marked-extended-timeline-container {
    position: relative;
    padding-left: 2rem;
    margin: 2rem 0;
    border-left: 2px solid #ddd;
}

/* Timeline Event */
.marked-extended-timeline-event {
    position: relative;
    padding-left: 2rem;
    padding-bottom: 2rem;
    margin-bottom: 1rem;
}

/* Event Marker (Dot) */
.marked-extended-timeline-event::before {
    content: '';
    position: absolute;
    left: -2.625rem;
    top: 0.5rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #3498db;
    box-shadow: 0 0 0 4px #fff;
    transition: all 0.3s ease;
    z-index: 1;
}

/* Active Event Marker */
.marked-extended-timeline-event.active::before {
    background: #3498db;
    border-color: #fff;
    box-shadow: 0 0 0 4px #fff, 0 0 0 8px rgba(52, 152, 219, 0.2);
    transform: scale(1.2);
}

/* Hover Effect */
.marked-extended-timeline-event:hover::before {
    transform: scale(1.2);
    box-shadow: 0 0 0 4px #fff, 0 0 0 8px rgba(52, 152, 219, 0.15);
}

/* Date Styling */
.marked-extended-timeline-date {
    font-weight: bold;
    color: #3498db;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Content Styling */
.marked-extended-timeline-content {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.marked-extended-timeline-content:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateX(4px);
}

.marked-extended-timeline-content h2 {
    margin-top: 0;
    color: #333;
    font-size: 1.25rem;
}

.marked-extended-timeline-content h2:first-child {
    margin-top: 0;
}

.marked-extended-timeline-content p {
    margin: 0.5rem 0;
    color: #666;
    line-height: 1.6;
}

.marked-extended-timeline-content p:first-child {
    margin-top: 0;
}

.marked-extended-timeline-content p:last-child {
    margin-bottom: 0;
}

Variant: Centered Timeline

.marked-extended-timeline-container.timeline-centered {
    padding-left: 0;
    border-left: none;
    border-left: 2px solid #ddd;
    max-width: 1200px;
    margin: 2rem auto;
}

.marked-extended-timeline-container.timeline-centered::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #ddd;
    transform: translateX(-50%);
}

.marked-extended-timeline-container.timeline-centered .marked-extended-timeline-event {
    width: 50%;
    padding-left: 0;
    padding-right: 3rem;
}

.marked-extended-timeline-container.timeline-centered .marked-extended-timeline-event:nth-child(even) {
    margin-left: 50%;
    padding-right: 0;
    padding-left: 3rem;
}

.marked-extended-timeline-container.timeline-centered .marked-extended-timeline-event::before {
    left: auto;
    right: -2.625rem;
}

.marked-extended-timeline-container.timeline-centered .marked-extended-timeline-event:nth-child(even)::before {
    right: auto;
    left: -2.625rem;
}

Variant: Colorful Timeline

/* Assign different colors to events */
.marked-extended-timeline-event:nth-child(4n+1)::before {
    border-color: #3498db; /* Blue */
}

.marked-extended-timeline-event:nth-child(4n+2)::before {
    border-color: #2ecc71; /* Green */
}

.marked-extended-timeline-event:nth-child(4n+3)::before {
    border-color: #e74c3c; /* Red */
}

.marked-extended-timeline-event:nth-child(4n+4)::before {
    border-color: #f39c12; /* Orange */
}

/* Active state inherits color */
.marked-extended-timeline-event:nth-child(4n+1).active::before {
    background: #3498db;
    box-shadow: 0 0 0 4px #fff, 0 0 0 8px rgba(52, 152, 219, 0.2);
}

.marked-extended-timeline-event:nth-child(4n+2).active::before {
    background: #2ecc71;
    box-shadow: 0 0 0 4px #fff, 0 0 0 8px rgba(46, 204, 113, 0.2);
}

.marked-extended-timeline-event:nth-child(4n+3).active::before {
    background: #e74c3c;
    box-shadow: 0 0 0 4px #fff, 0 0 0 8px rgba(231, 76, 60, 0.2);
}

.marked-extended-timeline-event:nth-child(4n+4).active::before {
    background: #f39c12;
    box-shadow: 0 0 0 4px #fff, 0 0 0 8px rgba(243, 156, 18, 0.2);
}

Dark Mode Support

/* Light theme */
body.light .marked-extended-timeline-container {
    border-left-color: #ddd;
}

body.light .marked-extended-timeline-event::before {
    background: #fff;
    border-color: #3498db;
    box-shadow: 0 0 0 4px #fff;
}

body.light .marked-extended-timeline-event.active::before {
    background: #3498db;
    border-color: #fff;
    box-shadow: 0 0 0 4px #fff, 0 0 0 8px rgba(52, 152, 219, 0.2);
}

body.light .marked-extended-timeline-date {
    color: #3498db;
}

body.light .marked-extended-timeline-content {
    background: #f8f9fa;
    color: #333;
}

/* Dark theme */
body.dark .marked-extended-timeline-container {
    border-left-color: #404040;
}

body.dark .marked-extended-timeline-event::before {
    background: #1e1e1e;
    border-color: #4a9eff;
    box-shadow: 0 0 0 4px #1e1e1e;
}

body.dark .marked-extended-timeline-event.active::before {
    background: #4a9eff;
    border-color: #1e1e1e;
    box-shadow: 0 0 0 4px #1e1e1e, 0 0 0 8px rgba(74, 158, 255, 0.2);
}

body.dark .marked-extended-timeline-date {
    color: #4a9eff;
}

body.dark .marked-extended-timeline-content {
    background: #2d333b;
    color: #e0e0e0;
}

Responsive Adjustments

@media (max-width: 768px) {
    .marked-extended-timeline-container {
        padding-left: 1.5rem;
        margin: 1.5rem 0;
    }

    .marked-extended-timeline-event {
        padding-left: 1.5rem;
    }

    .marked-extended-timeline-event::before {
        left: -2.35rem;
    }

    .marked-extended-timeline-date {
        font-size: 0.75rem;
    }

    .marked-extended-timeline-content {
        padding: 1rem;
    }
}

Copy Demo Theme

For complete styling with all variants: timeline-theme.css

Check the demo to see centered, colorful, and default timeline variants.

Aliases

The timeline block can be rendered using alternative aliases for start and end blocks:

Start Aliases
- :tml
- :timeline
End Aliases
- :tmlend
- :timelineend

Individual events can use these aliases:

Event Start Aliases
- :evt
- :event
Event End Aliases
- :evtend
- :eventend

Configuration Options

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

timelineClass: The base CSS class name for the timeline container. Defaults to 'marked-extended-timeline-container'.
eventClass: The CSS class name for individual timeline events. Defaults to 'marked-extended-timeline-event'.
dateFormat: A function to format dates. Receives a Date object and returns a formatted string. Defaults to toLocaleDateString().
template: A custom HTML template for the timeline structure. Defaults to the built-in template.
customizeToken: A function that allows you to customize the token object before rendering. Defaults to null.

Event syntax parameters:

date: The date of the event in ISO format (YYYY-MM-DD) or any valid date string. Required.
active: Whether this event should be visually highlighted ("true" or "false"). Defaults to "false".

Date Formatting

You can customize how dates are displayed using the dateFormat option:

// Example with custom date formatting
marked.use(markedExtendedTimeline({
    dateFormat: (date) => {
        return date.toLocaleDateString('en-US', {
            year: 'numeric',
            month: 'long',
            day: 'numeric'
        });
    }
}));

This will format dates like "January 15, 2023" instead of the default format.

Advanced Examples

Project Development Timeline

::::timeline
:::event{date="2023-01-01" active="true"}

## Planning Phase

Initial project setup and requirement analysis.

### Key Deliverables:

- [x] Project charter
- [x] Technical requirements
- [x] Resource allocation
- [x] Timeline definition

**Team Size**: 5 developers
**Duration**: 2 weeks
:::eventend

:::event{date="2023-01-15"}

## Development Sprint 1

Core infrastructure and basic functionality.

\`\`\`javascript
// Initial API setup
const express = require('express');
const app = express();

app.get('/health', (req, res) => {
res.json({ status: 'OK', timestamp: new Date() });
});
\`\`\`

### Completed Features:

- Authentication system
- Database setup
- Basic API endpoints
- Logging infrastructure
  :::eventend

:::event{date="2023-03-01"}

## Beta Release

First functional version released to beta testers.

### Metrics:

| Metric | Value |
|--------|-------|
| Beta Users | 50 |
| Bug Reports | 12 |
| Feature Requests | 8 |
| Performance Score | 85/100 |

> Feedback has been overwhelmingly positive!
:::eventend

:::event{date="2023-05-15"}

## Production Launch

Official product launches with a full feature set.

🎉 **Launch Day Success!**

- 1,000+ users in the first 24 hours
- Zero critical issues
- 99.9% uptime maintained
- Featured in tech news

[Read the launch announcement →](https://blog.example.com/launch)
:::eventend
::::timelineend

Historical Events Timeline

::::timeline
:::event{date="1969-07-20" active="true"}

## Moon Landing

Neil Armstrong becomes the first human to step on the Moon.

> "That's one small step for man, one giant leap for mankind."

![Moon Landing](https://example.com/moon-landing.jpg)

**Mission**: Apollo 11  
**Duration**: 8 days, 3 hours, 18 minutes
:::eventend

:::event{date="1989-11-09"}

## Fall of Berlin Wall

The Berlin Wall falls, symbolizing the end of the Cold War era.

### Impact:

- German reunification process begins
- End of divided Berlin
- Symbol of freedom and unity
- Major geopolitical shift in Europe
  :::eventend

:::event{date="1991-08-06"}

## World Wide Web

Tim Berners-Lee publishes the first website, marking the beginning of the World Wide Web.

\`\`\`html
<html>
<head>
  <title>The World Wide Web project</title>
</head>
<body>
  <h1>World Wide Web</h1>
  <p>The WorldWideWeb is a web of human-readable information...</p>
</body>
</html>
\`\`\`

**URL**: http://info.cern.ch/hypertext/WWW/TheProject.html
:::eventend
::::timelineend

Configuration Example

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

marked.use(markedExtendedTimeline({
    timelineClass: 'my-custom-timeline',
    eventClass: 'my-custom-event',
    dateFormat: (date) => {
        // Custom date formatting
        const options = {
            weekday: 'long',
            year: 'numeric',
            month: 'long',
            day: 'numeric'
        };
        return date.toLocaleDateString('en-US', options);
    },
    customizeToken: (token) => {
        // Add custom processing
        console.log('Processing timeline token:', token);
    }
}));

Timeline Features Summary

The extension provides comprehensive timeline functionality:

| Feature | Description | Example | Default | |---------|-------------|---------|---------| | Dates | Event timestamps | date="2024-01-15" | Required | | Active State | Highlight important event | active="true" | false | | Date Format | Custom formatter | Function | toLocaleDateString() | | Rich Content | Full Markdown | All syntax | Supported | | Visual Markers | Event dots | CSS pseudo-elements | Styled | | Hover Effects | Interactive feedback | :hover states | Animated | | Timeline Line | Vertical connector | Border-left | Visible | | Nested Extensions | Other extensions | All marked extensions | Supported |

Best Practices

1. Use Consistent Date Formats

<!-- Good: ISO dates (YYYY-MM-DD) -->
::::timeline
:::event{date="2024-01-15"}
:::event{date="2024-02-20"}
:::event{date="2024-03-10"}
::::timelineend

<!-- Avoid: Inconsistent formats -->
::::timeline
:::event{date="2024-01-15"}
:::event{date="Feb 20, 2024"}   <!-- ❌ Different format -->
:::event{date="3/10/24"}         <!-- ❌ Different format -->
::::timelineend

2. Chronological Order

<!-- Good: Events in chronological order -->
::::timeline
:::event{date="2024-01-01"}
First event
:::eventend

:::event{date="2024-06-01"}
Second event (later)
:::eventend

:::event{date="2024-12-01"}
Third event (latest)
:::eventend
::::timelineend

<!-- Avoid: Out of order -->
::::timeline
:::event{date="2024-12-01"}
:::event{date="2024-01-01"}  <!-- ❌ Should be first -->
::::timelineend

3. Mark One Active Event

<!-- Good: One active event -->
::::timeline
:::event{date="2024-01-01"}
Past event
:::eventend

:::event{date="2024-06-01" active="true"}
Current focus ⭐
:::eventend

:::event{date="2024-12-01"}
Future event
:::eventend
::::timelineend

<!-- Avoid: Multiple active events -->
::::timeline
:::event{date="2024-01-01" active="true"}
:::event{date="2024-06-01" active="true"}  <!-- ❌ Confusing -->
::::timelineend

4. Concise Event Titles

<!-- Good: Clear, concise titles -->
:::event{date="2024-01-15"}
## Product Launch
Successfully released v2.0
:::eventend

<!-- Avoid: Overly long titles -->
:::event{date="2024-01-15"}
## The Complete Story of How We Successfully Launched Our Revolutionary Product Version 2.0 After Months of Hard Work
<!-- ❌ Too verbose -->
:::eventend

5. Balanced Content

<!-- Good: Appropriate detail -->
:::event{date="2024-01-15"}
## Funding Round

Raised $10M Series A funding.

**Lead Investor:** Acme Ventures  
**Use of Funds:** Product development, hiring
:::eventend

<!-- Avoid: Too sparse -->
:::event{date="2024-01-15"}
Funding  <!-- ❌ Not enough context -->
:::eventend

<!-- Avoid: Too verbose -->
:::event{date="2024-01-15"}
## Funding Round
<!-- 10 paragraphs of text... ❌ Too much -->
:::eventend

Use Cases

1. Product Development Roadmap

# Product Roadmap 2026

## Planned Features & Milestones

::::timeline
:::event{date="2026-01-15" active="true"}
## Q1 2026 - Foundation

**Core Platform Improvements**

### Infrastructure Upgrades
- ⚡ Migration to Kubernetes
- 🔄 Real-time sync engine
- 📊 Advanced analytics platform
- 🔐 Enhanced security framework

### Development Team
- **Backend:** 8 engineers
- **Frontend:** 6 engineers
- **DevOps:** 3 engineers
- **QA:** 4 engineers

\`\`\`bash
# Infrastructure as Code
terraform apply -var-file=production.tfvars
kubectl apply -f k8s-manifests/
\`\`\`

**Timeline:** 12 weeks  
**Budget:** $500K  
**Risk Level:** Medium
:::eventend

:::event{date="2026-04-01"}
## Q2 2026 - AI Integration

**Intelligent Features Launch**

### AI-Powered Capabilities
1. **Smart Recommendations**
   - ML-based content suggestions
   - User behavior analysis
   - Predictive analytics

2. **Natural Language Processing**
   - Semantic search
   - Auto-categorization
   - Sentiment analysis

3. **Automation**
   - Workflow automation
   - Smart scheduling
   - Automated reporting

### Technical Requirements

| Component | Technology | Status |
|-----------|------------|--------|
| ML Platform | TensorFlow | Planning |
| Data Pipeline | Apache Kafka | Planning |
| Model Training | GPUs (AWS) | Planning |
| Vector DB | Pinecone | Planning |

### Success Metrics
- 🎯 50% reduction in manual tasks
- ⚡ 2x faster content discovery
- 📈 30% increase in user engagement

**Investment:** $750K  
**Expected ROI:** 200% within 12 months
:::eventend

:::event{date="2026-07-01"}
## Q3 2026 - Mobile Excellence

**Native Mobile Apps**

### iOS App
- **Target:** iOS 16+
- **Language:** Swift 5.9
- **Features:**
  - Offline mode
  - Push notifications
  - Touch ID / Face ID
  - Apple Watch companion

### Android App
- **Target:** Android 12+
- **Language:** Kotlin
- **Features:**
  - Material Design 3
  - Offline sync
  - Biometric auth
  - Widget support

### Cross-Platform SDK

\`\`\`javascript
// React Native SDK
import { MobileSDK } from '@myapp/mobile-sdk';

const sdk = new MobileSDK({
  apiKey: 'your-key',
  environment: 'production'
});

await sdk.sync();
\`\`\`

**Team Allocation:**
- iOS: 4 developers
- Android: 4 developers
- SDK: 2 developers
- QA: 3 testers

**Beta Testing:**
- Internal: 50 users (Week 1-2)
- Private: 500 users (Week 3-4)
- Public: 5,000 users (Week 5-8)
:::eventend

:::event{date="2026-10-01"}
## Q4 2026 - Enterprise Features

**Enterprise-Ready Platform**

### Enterprise Features
1. **Advanced Administration**
   - Role-based access control (RBAC)
   - Single Sign-On (SSO)
   - SAML 2.0 / OAuth 2.0
   - Audit logs

2. **Compliance & Security**
   - SOC 2 Type II certification
   - GDPR compliance
   - HIPAA compliance (healthcare)
   - Data residency options

3. **Enterprise Integrations**
   - Salesforce connector
   - Microsoft 365 integration
   - Slack / Teams integration
   - Custom API webhooks

### Pricing Tiers

| Tier | Price/Month | Features |
|------|-------------|----------|
| Team | $49 | Up to 10 users |
| Business | $199 | Up to 50 users |
| Enterprise | Custom | Unlimited users |

### Sales Strategy
- 🎯 Target: Fortune 500 companies
- 👥 Sales team: 8 AEs + 4 SEs
- 📞 Direct sales + Channel partners
- 🤝 Strategic partnerships

**Revenue Target:** $5M ARR  
**Win Rate Goal:** 35%  
**Sales Cycle:** 60-90 days
:::eventend

:::event{date="2026-12-15"}
## Year-End Review

**2026 Annual Achievements**

### Product Metrics
- ✅ 4 major releases delivered
- ✅ 250+ features shipped
- ✅ 99.95% uptime achieved
- ✅ < 50ms average API response

### Business Growth
- 📈 Revenue: $8M (+300% YoY)
- 👥 Customers: 500+ enterprise
- 🌍 Markets: 25+ countries
- ⭐ NPS Score: 75 (World-class)

### Team Expansion
- 👨‍💻 Engineering: 25 → 42
- 💼 Sales: 5 → 15
- 🎨 Design: 3 → 7
- 🛠️ Customer Success: 4 → 12

### Industry Recognition
- 🏆 "Best B2B Software" - TechAwards
- 🌟 "Fastest Growing Startup" - Forbes
- 🎖️ "Innovation Leader" - Gartner

**2027 Vision:** Become the #1 platform in our category
:::eventend
::::timelineend

2. Company History

# Our Story

## From Garage Startup to Industry Leader

::::timeline
:::event{date="2018-03-01" active="true"}
## The Beginning

**Founded in a garage in Silicon Valley**

### The Founding Team
- **Sarah Chen** - CEO (ex-Google)
- **Michael Torres** - CTO (ex-Facebook)
- **Emily Wong** - CPO (ex-Amazon)

### Initial Vision
Build the most intuitive productivity platform for modern teams.

**Funding:** $100K (Friends & Family)  
**Team Size:** 3 co-founders  
**Office:** Sarah's garage

> "We believed there was a better way to collaborate."
> — Sarah Chen, CEO

### First Milestone
- ✅ Company incorporated
- ✅ Domain registered
- ✅ First prototype built
- ✅ 10 beta testers signed up
:::eventend

:::event{date="2019-01-15"}
## Seed Funding

**Raised $2M seed round**

### Investors
- **Lead:** Seed Ventures ($1.5M)
- **Angels:** Various tech executives ($500K)

### Use of Funds
1. Hire 5 engineers
2. Build MVP
3. Market research
4. First office space

**Valuation:** $8M pre-money  
**Team Growth:** 3 → 10 people  
**New Office:** 1,500 sq ft in San Francisco

### Product Development
\`\`\`javascript
// First feature: Real-time collaboration
const socket = io('wss://api.example.com');
socket.on('update', (data) => {
  updateDocument(data);
});
\`\`\`

**Timeline:** 8 months to launch
:::eventend

:::event{date="2019-09-20"}
## Product Launch

**Public beta launched at TechCrunch Disrupt**

### Launch Stats
- 🚀 Featured on TechCrunch homepage
- 📈 1,000 signups in first 24 hours
- 💬 200+ beta feedback submissions
- ⭐ 4.5/5 Product Hunt rating

### Early Adopters
- 50 companies signed up
- Industries: Tech, Marketing, Design
- User feedback: Overwhelmingly positive

**Press Coverage:**
- TechCrunch: "The Future of Team Collaboration"
- VentureBeat: "Startup to Watch"
- The Verge: "A Fresh Take on Productivity"

### Metrics (Month 1)
| Metric | Value |
|--------|-------|
| Users | 5,000 |
| DAU/MAU | 35% |
| Retention | 60% (Day 7) |
| NPS | +45 |
:::eventend

:::event{date="2020-06-01"}
## Series A

**$15M Series A led by Acme Ventures**

### Funding Details
- **Lead:** Acme Ventures ($10M)
- **Existing:** Seed Ventures ($3M)
- **Strategic:** Enterprise Partners ($2M)

**Valuation:** $75M post-money  
**Use of Funds:**
1. Expand engineering (15 → 30)
2. Build sales team (0 → 8)
3. Marketing campaigns
4. International expansion

### Product Milestones
- ✅ Reached 25,000 users
- ✅ Launched mobile apps
- ✅ 99.9% uptime for 6 months
- ✅ First paying customers

### Team Expansion
- **Engineering:** 15 engineers
- **Sales:** 8 AEs
- **Marketing:** 4 marketers
- **Customer Success:** 3 CSMs

**Revenue:** $500K ARR
:::eventend

:::event{date="2021-03-15"}
## 100K Users

**Reached 100,000 users milestone! 🎉**

### Growth Trajectory
- Q1 2020: 10K users
- Q2 2020: 25K users
- Q3 2020: 50K users
- Q4 2020: 75K users
- Q1 2021: 100K users

### User Demographics
- 🌍 Users in 75+ countries
- 🏢 5,000+ companies
- 💼 Industries: Tech (45%), Marketing (25%), Design (15%), Other (15%)

### Community Growth
- 📝 500+ blog posts by users
- 🎥 100+ YouTube tutorials
- 💬 Active Slack community (10K members)
- 🎓 50+ templates shared

**Revenue:** $3M ARR  
**Team Size:** 45 employees
:::eventend

:::event{date="2022-11-01"}
## Series B

**$50M Series B - Unicorn trajectory**

### Investment Round
- **Lead:** Growth Capital ($35M)
- **Existing:** Acme Ventures ($10M)
- **Strategic:** Corporate Ventures ($5M)

**Valuation:** $400M post-money  
**Total Raised:** $67M

### Expansion Plans
1. **Product:** AI-powered features
2. **Geographic:** Europe & Asia launch
3. **Team:** 45 → 100 employees
4. **Enterprise:** Dedicated sales team

### Business Metrics
- 📊 Revenue: $12M ARR
- 👥 Customers: 10,000+ companies
- 🌟 NPS: 68
- 💰 Gross Margin: 80%

**Offices:** San Francisco, London, Singapore
:::eventend

:::event{date="2024-01-20"}
## Market Leader

**Recognized as category leader by Gartner**

### Industry Recognition
- 🏆 Gartner Magic Quadrant: Leader
- 🌟 G2 Leader: 4.7/5 (5,000+ reviews)
- 🎖️ Forbes Cloud 100
- 🥇 Best Place to Work (Glassdoor 4.8/5)

### Business Achievement
- 💰 Revenue: $50M ARR
- 📈 Growth: 200% YoY
- 👥 Customers: 50,000+
- 🌍 Markets: 100+ countries

### Product Evolution
- ✅ 15 integrations
- ✅ API platform
- ✅ Mobile SDK
- ✅ Enterprise features

**Team:** 150 employees globally  
**Offices:** 5 locations worldwide
:::eventend

:::event{date="2025-12-15"}
## Today

**A global company transforming how teams work**

### Current Status (2025)
- 💼 **Revenue:** $85M ARR
- 👥 **Employees:** 200+
- 🌍 **Customers:** 100,000+
- ⭐ **Users:** 2M+

### Recent Achievements
- 🚀 Launched AI assistant
- 🌐 Expanded to 120+ countries
- 🏆 Won "Product of the Year"
- 📱 50M+ mobile downloads

### What's Next?
- Series C funding (2026)
- IPO preparation (2027)
- Continued innovation
- Global expansion

> "We're just getting started. The best is yet to come."
> — Sarah Chen, CEO
:::eventend
::::timelineend

**Join Us:** [Careers at Our Company](https://example.com/careers)

3. Historical Events

# History of Computing

## Major Milestones in Computer Science

::::timeline
:::event{date="1936-01-01"}
## Turing Machine

**Alan Turing introduces the concept of a universal machine**

The Turing Machine is a mathematical model of computation that defines an abstract machine capable of manipulating symbols on a strip of tape according to a table of rules.

### Impact
- Foundation of theoretical computer science
- Introduced the concept of algorithms
- Basis for understanding computability

> "A computer would deserve to be called intelligent if it could deceive a human into believing that it was human."
> — Alan Turing

**Significance:** Established the theoretical foundation for all modern computers.
:::eventend

:::event{date="1945-06-30"}
## ENIAC

**First general-purpose electronic computer**

ENIAC (Electronic Numerical Integrator and Computer) was unveiled at the University of Pennsylvania.

### Specifications
- **Weight:** 30 tons
- **Size:** 1,800 square feet
- **Vacuum tubes:** 17,468
- **Power:** 150 kilowatts
- **Speed:** 5,000 additions/second

### Applications
- Artillery calculations
- Weather prediction
- Atomic energy calculations

**Cost:** $487,000 (equivalent to $7M today)
:::eventend

:::event{date="1969-10-29" active="true"}
## ARPANET

**First message sent over ARPANET**

The first ARPANET message was sent from UCLA to Stanford Research Institute. The system crashed after transmitting "LO" (intended to be "LOGIN").

### Network Nodes (1969)
1. UCLA
2. Stanford Research Institute
3. UC Santa Barbara
4. University of Utah

\`\`\`
Date: October 29, 1969
Time: 10:30 PM
Message: "LO" (system crashed)
Intended: "LOGIN"
\`\`\`

**Significance:** Birth of the Internet  
**Protocol:** NCP (Network Control Protocol)
:::eventend

:::event{date="1989-03-12"}
## World Wide Web

**Tim Berners-Lee proposes the World Wide Web**

Working at CERN, Tim Berners-Lee submitted his proposal for an information management system that would become the World Wide Web.

### Key Innovations
- HTML (HyperText Markup Language)
- HTTP (HyperText Transfer Protocol)
- URL (Uniform Resource Locator)
- First web browser and server

### First Website
\`\`\`html
<h1>World Wide Web</h1>
<p>The WorldWideWeb (W3) is a wide-area
hypermedia information retrieval
initiative aiming to give universal
access to a large universe of documents.</p>
\`\`\`

**URL:** http://info.cern.ch/hypertext/WWW/TheProject.html  
**Date launched:** August 6, 1991
:::eventend

:::event{date="2007-01-09"}
## iPhone Launch

**Steve Jobs introduces the iPhone**

Apple revolutionized mobile computing with the first iPhone, combining a phone, iPod, and internet communicator.

### Revolutionary Features
- ✅ Multi-touch interface
- ✅ Mobile web browser (Safari)
- ✅ Visual voicemail
- ✅ No physical keyboard

### Specifications
- **Display:** 3.5" 320×480
- **Storage:** 4GB / 8GB
- **Camera:** 2MP
- **Price:** $499 / $599

**Impact:**
- Changed mobile industry forever
- Sparked smartphone revolution
- Created App Store ecosystem (2008)
- Sold 1.4M units in first year

> "This is a day I've been looking forward to for two and a half years."
> — Steve Jobs
:::eventend

:::event{date="2015-11-30"}
## AlphaGo

**DeepMind's AlphaGo defeats European Go champion**

AlphaGo became the first computer program to beat a professional Go player without handicaps on a full-sized board.

### Breakthrough
- Used deep neural networks
- Reinforcement learning
- Monte Carlo tree search

### Historic Match (March 2016)
- **Opponent:** Lee Sedol (18-time world champion)
- **Result:** 4-1 victory for AlphaGo
- **Prize:** $1 million

**Significance:**
- Solved one of AI's grand challenges
- Demonstrated power of deep learning
- Showed creativity in AI decision-making

### Technical Achievement
\`\`\`python
# Deep neural network architecture
def policy_network(board_state):
    # Predicts best next move
    return predicted_move

def value_network(board_state):
    # Evaluates winning probability
    return win_probability
\`\`\`
:::eventend
::::timelineend

**Learn More:** [Computer History Museum](https://computerhistory.org)

Troubleshooting

Events Not Displaying

Problem: Timeline events don't appear.

Solutions:

Import CSS:

import '@fsegurai/marked-extended-timeline/styles/timeline.css';

Check date format:

<!-- Correct -->
:::event{date="2024-01-15"}

<!-- Wrong -->
:::event{date="January 15"}  <!-- ❌ Use ISO format -->

Verify structure:

<!-- Ensure proper nesting -->
::::timeline
:::event{date="2024-01-15"}
Content
:::eventend
::::timelineend

Timeline Line Not Visible

Problem: Vertical timeline line doesn't show.

Solutions:

Check container styles:

.marked-extended-timeline-container {
  border-left: 2px solid #ddd; /* Ensure this is present */
}

Import theme CSS:

import '@fsegurai/marked-extended-timeline/styles/timeline-theme.css';

Event Markers Missing

Problem: Event dots don't appear.

Solution:

/* Ensure pseudo-element styles are loaded */
.marked-extended-timeline-event::before {
  content: '';
  position: absolute;
  left: -2.625rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #3498db;
}

Active State Not Working

Problem: Active event not highlighted.

Solutions:

Use correct attribute:

<!-- Correct -->
:::event{date="2024-01-15" active="true"}

<!-- Wrong -->
:::event{date="2024-01-15" active="yes"}  <!-- ❌ Use "true" -->

Check CSS:

.marked-extended-timeline-event.active::before {
  background: #3498db; /* Active marker color */
}

Framework Integration

React Integration

// TimelineContent.tsx
import { marked } from 'marked';
import markedExtendedTimeline from '@fsegurai/marked-extended-timeline';
import '@fsegurai/marked-extended-timeline/styles/timeline.css';
import '@fsegurai/marked-extended-timeline/styles/timeline-theme.css';
import { useEffect, useState } from 'react';

marked.use(markedExtendedTimeline({
  dateFormat: (date) => {
    return date.toLocaleDateString('en-US', {
      year: 'numeric',
      month: 'long',
      day: 'numeric'
    });
  }
}));

interface Props {
  content: string;
}

export function TimelineContent({ content }: Props) {
  const [html, setHtml] = useState('');
  
  useEffect(() => {
    const parsed = marked.parse(content);
    setHtml(parsed);
  }, [content]);
  
  return (
    <div 
      className="timeline-wrapper"
      dangerouslySetInnerHTML={{ __html: html }} 
    />
  );
}

// Usage:
// <TimelineContent content={markdownWithTimeline} />

Vue 3 Integration

<script setup lang="ts">
import { marked } from 'marked';
import markedExtendedTimeline from '@fsegurai/marked-extended-timeline';
import '@fsegurai/marked-extended-timeline/styles/timeline.css';
import '@fsegurai/marked-extended-timeline/styles/timeline-theme.css';
import { computed } from 'vue';

marked.use(markedExtendedTimeline({
  dateFormat: (date) => date.toLocaleDateString()
}));

interface Props {
  content: string;
}

const props = defineProps<Props>();

const html = computed(() => {
  return marked.parse(props.content);
});
</script>

<template>
  <div class="timeline-container" v-html="html" />
</template>

Angular Integration

// timeline-content.component.ts
import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
import { marked } from 'marked';
import markedExtendedTimeline from '@fsegurai/marked-extended-timeline';

marked.use(markedExtendedTimeline({
  dateFormat: (date) => date.toLocaleDateString()
}));

@Component({
  selector: 'app-timeline-content',
  template: \`<div [innerHTML]="parsedContent"></div>\`,
  styleUrls: [
    '../node_modules/@fsegurai/marked-extended-timeline/styles/timeline.css',
    '../node_modules/@fsegurai/marked-extended-timeline/styles/timeline-theme.css'
  ]
})
export class TimelineContentComponent implements OnChanges {
  @Input() content: string = '';
  parsedContent: SafeHtml = '';

  constructor(private sanitizer: DomSanitizer) {}

  ngOnChanges(changes: SimpleChanges): void {
    if (changes['content']) {
      const html = marked.parse(this.content);
      this.parsedContent = this.sanitizer.bypassSecurityTrustHtml(html);
    }
  }
}

Performance Tips

Limit events per timeline: Keep under 20 events for optimal scrolling
Lazy load images: Use lazy loading for images in events
Optimize animations: Use CSS transforms for smooth performance

/* Optimize event animations */
.marked-extended-timeline-event {
  will-change: transform;
  transform: translateZ(0); /* Force GPU acceleration */
}

Contributing

Found a bug or have a feature request? Please open an issue on GitHub.

Related Resources

Available Extensions

| Extension | Package | Version | Description | |-------------|--------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------|----------------------------------------------------------------------| | All - Bundle | @fsegurai/marked-extended-bundle | npm | Includes all extensions in a single package for easy integration | | Accordion | @fsegurai/marked-extended-accordion | npm | Add collapsible accordion sections to your markdown | | Alert | @fsegurai/marked-extended-alert | npm | Create styled alert boxes for important information | | Comments | @fsegurai/marked-extended-comments | npm | Add comment sections with author and timestamp metadata | | Embeds | @fsegurai/marked-extended-embeds | npm | Easily embed content from various platforms (YouTube, Twitter, etc.) | | Footnote | @fsegurai/marked-extended-footnote | npm | Add footnotes with automatic numbering | | Kanban | @fsegurai/marked-extended-kanban | npm | Create kanban boards with customizable columns and cards | | Lists | @fsegurai/marked-extended-lists | npm | Enhanced list formatting options | | Slide | @fsegurai/marked-extended-slide | npm | Create slide decks directly from markdown content | | Spoiler | @fsegurai/marked-extended-spoiler | npm | Hide content behind spoiler tags | | Tables | @fsegurai/marked-extended-tables | npm | Advanced table formatting with cell spanning | | Tabs | @fsegurai/marked-extended-tabs | npm | Create tabbed content sections | | Timeline | @fsegurai/marked-extended-timeline | npm | Display content in an interactive timeline format | | Typographic | @fsegurai/marked-extended-typographic | npm | 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.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

🎯 Overview

✨ Key Features

🎪 Live Demo

Table of contents

Installation

Usage

Basic Usage

Quick Start

Basic Concept

Basic Implementation

Syntax & Usage

Basic Timeline

Active Event Highlighting

Rich Content in Events

Date Formats

Short Aliases

CSS Classes Reference

Complete Styling Example

Variant: Centered Timeline

Variant: Colorful Timeline

Dark Mode Support

Responsive Adjustments

Copy Demo Theme

Aliases

Configuration Options

Date Formatting

Advanced Examples

Project Development Timeline

Historical Events Timeline

Configuration Example

Timeline Features Summary

Best Practices

1. Use Consistent Date Formats

2. Chronological Order

3. Mark One Active Event

4. Concise Event Titles

5. Balanced Content

Use Cases

1. Product Development Roadmap

2. Company History

3. Historical Events

Troubleshooting

Events Not Displaying

Timeline Line Not Visible

Event Markers Missing

Active State Not Working

Framework Integration

React Integration

Vue 3 Integration

Angular Integration

Performance Tips

Contributing

Related Resources

Available Extensions

Demo Application

License