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

@fsegurai/marked-extended-lists Extension for Marked.js that adds support for extended lists, allowing the creation of lists with different types of markers and other patterns to be rendered providing a more flexible list formatting.

🎯 Overview

The marked-extended-lists extension supercharges Markdown list rendering with advanced numbering systems, interactive task lists, proper accessibility features, and intelligent nested list handling. With support for alphabetic, Roman numeral, and custom numbering, plus GitHub-style task lists with optional interactivity, it's perfect for documentation, project management, academic writing, and structured content.

✨ Key Features

• 🔢 Multiple Numbering Systems: Numeric (1,2,3), alphabetic (a,b,c), Roman numerals (i,ii,iii)
• ✅ Interactive Task Lists: GitHub-style checkboxes with optional click handlers
• 🎯 Intelligent Numbering: Automatic skip handling and custom start values
• ♿ Accessibility First: ARIA labels and semantic HTML
• 🔄 Nested List Support: Unlimited nesting with proper indentation
• 🎨 Fully Customizable: Complete control over styling and behavior
• 📱 Responsive Design: Optimized for all screen sizes
• 🖱️ Interactive Checkboxes: Optional real-time task toggling
• 🎭 Visual Feedback: Strikethrough and opacity for completed tasks
• 🔧 Framework Agnostic: Works with React, Vue, Angular, Svelte, and vanilla JS
• 📊 Project Management: Perfect for sprint planning and task tracking
• ⚡ Performance Optimized: Efficient rendering for large lists

🎪 Live Demo

Experience all list types and interactive features: View Demo

Table of contents

• Installation
• Usage
  • Basic Usage
• Quick Start
  • Syntax & Usage
  • Numbering Systems
  • Task Lists
  • Interactive Features
  • Configuration Options
  • Advanced Examples
  • Use Cases
• More Resources
  • Available Extensions
  • Demo Application
• License

Installation

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

bun install @fsegurai/marked-extended-lists marked@^17 --save

Usage

Basic Usage

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

Quick Start

Automatic Enhancement

This extension automatically enhances all list types while maintaining full compatibility with standard Markdown and GFM syntax.

No special syntax required - your existing lists are automatically improved with proper numbering, accessibility, and visual enhancements.

import { marked } from 'marked';
import markedExtendedLists from '@fsegurai/marked-extended-lists';

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

marked.use(markedExtendedLists());

### Installation

Install the package using your preferred package manager:

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

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

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

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

Basic Implementation

import { marked } from 'marked';
import markedExtendedLists from '@fsegurai/marked-extended-lists';

// Optional: Import styles for enhanced visuals
import '@fsegurai/marked-extended-lists/styles/lists.css';
import '@fsegurai/marked-extended-lists/styles/lists-theme.css';

// Register the extension
marked.use(markedExtendedLists());

// Your markdown content with various list types
const markdown = `
# Documentation Structure

## Ordered Lists - Numeric

1. First item
2. Second item
3. Third item

## Ordered Lists - Alphabetic

a. First alphabetic
b. Second alphabetic
c. Third alphabetic

## Ordered Lists - Roman Numerals

I. First Roman
II. Second Roman
III. Third Roman

## Task Lists

- [ ] Uncompleted task
- [x] Completed task
- [ ] Another task
    - [ ] Nested subtask
    - [x] Completed nested task

## Nested Lists with Mixed Types

1. First level numeric
   a. Second level alphabetic
      i. Third level Roman (lowercase)
      ii. Another Roman item
   b. Back to alphabetic
2. Continue numeric

## Lists with Skip Values

1. First item
3. Third item (skipped 2)
5. Fifth item (skipped 4)

## Lists Starting Mid-Sequence

5. Start from five
6. Continue sequentially
7. And so on
`;

// Parse and render
const html = marked.parse(markdown);
console.log(html);

Syntax & Usage

Numeric Lists (Default)

1. First item
2. Second item
3. Third item

Alphabetic Lists (Lowercase)

a. First alphabetic
b. Second alphabetic
c. Third alphabetic

Alphabetic Lists (Uppercase)

A. First uppercase
B. Second uppercase
C. Third uppercase

Roman Numeral Lists (Lowercase)

i. First Roman
ii. Second Roman
iii. Third Roman
iv. Fourth Roman

Roman Numeral Lists (Uppercase)

I. First Roman
II. Second Roman
III. Third Roman
IV. Fourth Roman

Alternative Delimiter (Parenthesis)

1) First item
2) Second item

a) Alphabetic with parenthesis
b) Another item

I) Roman with parenthesis
II) Another Roman

Unordered Lists

* First bullet
* Second bullet
* Third bullet

- Alternative style
- Using hyphen

+ Plus sign style
+ Another item

Mixed Nested Lists

1. Top level numeric
   a. Nested alphabetic
      i. Deeply nested Roman
      ii. Another Roman
   b. Back to alphabetic
2. Continue top level

I. Roman top level
   A. Alphabetic nested
      1. Numeric deeply nested
      2. Another numeric
   B. Continue alphabetic
II. Roman continues

The extension provides **enhanced accessibility** with proper ARIA labels, supports **multiple numbering systems**, and
includes **interactive task lists** with optional click handlers. All features work seamlessly with nested list
structures.

### Importing Styles (Optional)

**Note:** This extension works perfectly without any CSS imports. These styles are purely optional enhancements for visual appearance.

#### Option 1: Using CSS (For enhanced styling)

```javascript
// Optional: Import enhanced list styling
import '@fsegurai/marked-extended-lists/styles/lists.css';
import '@fsegurai/marked-extended-lists/styles/lists-theme.css';

Or using CDN (vanilla HTML/JavaScript projects):

<!-- Latest version -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fsegurai/marked-extended-lists@latest/dist/styles/lists.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fsegurai/marked-extended-lists@latest/dist/styles/lists-theme.css">

<!-- Or lock to a specific version (recommended for production) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fsegurai/[email protected]/dist/styles/lists.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fsegurai/[email protected]/dist/styles/lists-theme.css">

Option 2: Using SCSS (For customization)

// Optional: Import with customizable variables
@import '@fsegurai/marked-extended-lists/styles/lists.scss';
@import '@fsegurai/marked-extended-lists/styles/lists-theme.scss';

// Customize SCSS variables (optional)
$checkbox-accent: #007bff;
$completed-opacity: 0.6;
@import '@fsegurai/marked-extended-lists/styles/lists-theme.scss';

Angular Integration

For Angular projects using ngx-markdown:

// In your angular.json, add the CSS file to styles array (optional):
{
  "styles": [
    "node_modules/@fsegurai/marked-extended-lists/dist/styles/lists.css",
    "node_modules/@fsegurai/marked-extended-lists/dist/styles/lists-theme.css",
    // ... other styles
  ]
}

// Or import in your global styles.scss (optional):
@import '@fsegurai/marked-extended-lists/styles/lists.scss';
@import '@fsegurai/marked-extended-lists/styles/lists-theme.scss';

What do the optional styles provide?

• Enhanced task list checkbox styling with hover effects
• Visual feedback for completed tasks (strikethrough, opacity)
• Better spacing and alignment for nested lists
• Dark mode support
• Print-friendly rendering

Remember: The extension works great without these styles - they're just visual enhancements!

Styling Your Lists

This extension is pure structural and does not inject CSS. You have complete control over list styling.

Generated HTML Structure

Task Lists:

<ul class="task-list">
    <li class="task-list-item">
        <input type="checkbox" class="task-list-item-checkbox" disabled>
        <span class="task-list-item-text">Uncompleted task</span>
    </li>
    <li class="task-list-item checked">
        <input type="checkbox" class="task-list-item-checkbox" checked disabled>
        <span class="task-list-item-text">Completed task</span>
    </li>
</ul>

Ordered Lists with Different Numbering:

<ol style="list-style-type: decimal;">
    <li>First item</li>
    <ol style="list-style-type: lower-alpha;">
        <li>Nested alphabetic</li>
    </ol>
    <ol style="list-style-type: upper-roman;">
        <li>Roman numeral</li>
    </ol>
</ol>

CSS Classes Reference

| Class | Purpose | Element | |----------------------------|----------------------|------------------------| | .task-list | Task list container | ul | | .task-list-item | Individual task item | li | | .task-list-item.checked | Completed task | li | | .task-list-item-checkbox | Checkbox input | input[type="checkbox"] | | .task-list-item-text | Task text | span |

Complete Styling Example

/* Base List Styling */
ul, ol {
    margin: 1rem 0;
    padding-left: 2rem;
    line-height: 1.7;
}

ul li, ol li {
    margin: 0.5rem 0;
    color: #333;
}

/* Nested Lists */
ul ul, ul ol, ol ul, ol ol {
    margin: 0.5rem 0;
}

/* Task Lists */
.task-list {
    list-style: none;
    padding-left: 0;
}

.task-list-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.5rem 0;
    position: relative;
    transition: all 0.2s ease;
}

.task-list-item:hover {
    background: rgba(0, 0, 0, 0.02);
    padding-left: 0.5rem;
    margin-left: -0.5rem;
    border-radius: 4px;
}

/* Checkbox Styling */
.task-list-item-checkbox {
    margin: 0.25rem 0 0 0;
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
    accent-color: #0066cc;
    border: 2px solid #d0d7de;
    border-radius: 4px;
    appearance: none;
    background: white;
    transition: all 0.2s ease;
}

.task-list-item-checkbox:hover {
    border-color: #0066cc;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

.task-list-item-checkbox:checked {
    background: #0066cc;
    border-color: #0066cc;
    position: relative;
}

.task-list-item-checkbox:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 14px;
    font-weight: bold;
}

/* Task Text */
.task-list-item-text {
    flex: 1;
    transition: all 0.2s ease;
}

.task-list-item.checked .task-list-item-text {
    color: #6e7781;
    text-decoration: line-through;
    opacity: 0.7;
}

/* Nested Task Lists */
.task-list .task-list {
    margin-left: 2rem;
    padding-left: 0;
}

.task-list .task-list-item {
    font-size: 0.95em;
}

/* Ordered List Numbering Styles */
ol[style*="decimal"] {
    list-style-type: decimal;
}

ol[style*="lower-alpha"] {
    list-style-type: lower-alpha;
}

ol[style*="upper-alpha"] {
    list-style-type: upper-alpha;
}

ol[style*="lower-roman"] {
    list-style-type: lower-roman;
}

ol[style*="upper-roman"] {
    list-style-type: upper-roman;
}

/* Custom List Markers */
ul > li::marker {
    color: #0066cc;
    font-weight: bold;
}

ol > li::marker {
    color: #0066cc;
    font-weight: 600;
}

/* Nested List Indentation */
ul ul, ol ul {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

ul ul > li::marker {
    content: '◦ ';
}

ul ul ul > li::marker {
    content: '▪ ';
}

Dark Mode Support

/* Light theme */
body.light ul li,
body.light ol li {
    color: #24292e;
}

body.light .task-list-item:hover {
    background: rgba(0, 0, 0, 0.02);
}

body.light .task-list-item-checkbox {
    background: white;
    border-color: #d0d7de;
}

body.light .task-list-item-checkbox:checked {
    background: #0066cc;
    border-color: #0066cc;
}

body.light .task-list-item.checked .task-list-item-text {
    color: #6e7781;
}

/* Dark theme */
body.dark ul li,
body.dark ol li {
    color: #d1d5da;
}

body.dark .task-list-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

body.dark .task-list-item-checkbox {
    background: #2d333b;
    border-color: #444c56;
}

body.dark .task-list-item-checkbox:hover {
    border-color: #58a6ff;
    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.1);
}

body.dark .task-list-item-checkbox:checked {
    background: #58a6ff;
    border-color: #58a6ff;
}

body.dark .task-list-item.checked .task-list-item-text {
    color: #8b949e;
}

body.dark ul > li::marker,
body.dark ol > li::marker {
    color: #58a6ff;
}

Interactive Task Lists (with JavaScript)

/* Enable pointer cursor when checkboxes are interactive */
.task-list-item-checkbox:not([disabled]) {
    cursor: pointer;
}

/* Add animation on check/uncheck */
.task-list-item-checkbox {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.task-list-item.checked {
    animation: task-complete 0.4s ease;
}

@keyframes task-complete {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
    100% {
        transform: scale(1);
    }
}

/* Strike-through animation */
.task-list-item-text {
    position: relative;
}

.task-list-item.checked .task-list-item-text::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform-origin: left;
    animation: strike 0.3s ease;
}

@keyframes strike {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

Variant: Colorful Task Lists

/* Priority-based colors */
.task-list-item[data-priority="high"] .task-list-item-checkbox {
    border-color: #e5534b;
}

.task-list-item[data-priority="high"] .task-list-item-checkbox:checked {
    background: #e5534b;
}

.task-list-item[data-priority="medium"] .task-list-item-checkbox {
    border-color: #c69026;
}

.task-list-item[data-priority="medium"] .task-list-item-checkbox:checked {
    background: #c69026;
}

.task-list-item[data-priority="low"] .task-list-item-checkbox {
    border-color: #57ab5a;
}

.task-list-item[data-priority="low"] .task-list-item-checkbox:checked {
    background: #57ab5a;
}

Variant: Compact Lists

.list-compact ul,
.list-compact ol {
    line-height: 1.4;
}

.list-compact li {
    margin: 0.25rem 0;
}

.list-compact .task-list-item {
    padding: 0.25rem 0;
}

.list-compact .task-list-item-checkbox {
    width: 16px;
    height: 16px;
}

Print Styles

@media print {
    .task-list-item-checkbox {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .task-list-item.checked .task-list-item-text {
        text-decoration: line-through;
        color: #666;
    }

    /* Show completed checkbox in print */
    .task-list-item-checkbox:checked::after {
        content: '✓';
        color: black;
    }
}

Accessibility Enhancements

/* Focus styles for keyboard navigation */
.task-list-item-checkbox:focus {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
}

.task-list-item-checkbox:focus-visible {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
}

/* Remove outline for mouse users */
.task-list-item-checkbox:focus:not(:focus-visible) {
    outline: none;
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .task-list-item-checkbox {
        border-width: 2px;
    }

    .task-list-item-checkbox:checked {
        background: currentColor;
    }
}

Check the demo to see interactive task lists and various list styles.

List Types

The extension supports the following list types:

| Marker | Type | Example Output | |---------------|----------------------|---------------------| | 1. or 1) | Numeric | 1, 2, 3, ... | | a. or a) | Lowercase alphabetic | a, b, c, ... | | A. or A) | Uppercase alphabetic | A, B, C, ... | | i. or i) | Lowercase Roman | i, ii, iii, iv, ... | | I. or I) | Uppercase Roman | I, II, III, IV, ... | | *, -, + | Unordered | Bullet points |

Example:

a. First alphabetic
b. Second alphabetic
c. Third alphabetic

I. Roman numeral one
II. Roman numeral two
III. Roman numeral three

Task Lists

Task lists use GitHub Flavored Markdown syntax with enhanced checkbox rendering:

- [ ] Uncompleted task
- [x] Completed task
- [ ] Another task
    - [ ] Nested subtask
    - [x] Nested completed

Output:

<ul>
    <li><input type="checkbox" disabled aria-label="Unchecked task item"> Uncompleted task</li>
    <li><input type="checkbox" disabled checked aria-label="Checked task item"> Completed task</li>
</ul>

Interactive Checkboxes (Advanced)

Enable clickable checkboxes that can update the source Markdown:

marked.use(markedExtendedLists({
    interactiveCheckboxes: true,
    onCheckboxChange: (checkboxId, checked, metadata) => {
        console.log('Checkbox toggled:', checkboxId, checked);
        // YOU must implement source update logic
        updateMarkdownSource(metadata.rawText, checked);
    }
}));

⚠️ Note: This is a client-side-only feature. You must implement the source Markdown update logic. See INTERACTIVE_CHECKBOXES.md for detailed examples.

Handling Duplicates: If you have multiple tasks with the same name, the extension intelligently matches by task text, indentation level, and current checked state. For best results, make task names unique. See HANDLING_DUPLICATES.md for details.

Configuration Options

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

• checkboxClass: Custom CSS class for task list checkboxes. Defaults to undefined.
• interactiveCheckboxes: Enable clickable checkboxes for task lists. Defaults to false.
• onCheckboxChange: Callback function triggered when interactive checkboxes are clicked. Receives (checkboxId, checked, metadata).
• listClass: Custom CSS class for enhanced list containers. Defaults to 'marked-extended-list'.
• preserveStartValue: Whether to preserve custom start values for ordered lists. Defaults to true.
• accessibilityLabels: Whether to add ARIA labels to checkboxes. Defaults to true.

Interactive Features

Interactive Checkboxes

Enable user interaction with task list checkboxes:

marked.use(markedExtendedLists({
    interactiveCheckboxes: true,
    onCheckboxChange: (checkboxId, checked, metadata) => {
        console.log('Task updated:', {
            id: checkboxId,
            checked: checked,
            text: metadata.text,
            line: metadata.lineNumber
        });

        // Implement your source update logic here
        updateMarkdownSource(metadata.rawText, checked);
    }
}));

Important Notes:

• Interactive checkboxes are client-side only
• You must implement source Markdown update logic
• The extension provides metadata to help locate and update the original text
• For duplicate task names, matching uses text + indentation + current state

Advanced Examples

Complex Nested Lists

# Project Structure

1. **Frontend Development**
   a. User Interface Design
   I. Wireframes and mockups
   II. Component library creation
   III. Responsive design implementation
   b. State Management
   I. Redux store setup
   II. Action creators and reducers
   III. Middleware configuration
   c. Testing Strategy
   I. Unit tests for components
   II. Integration tests for features
   III. End-to-end testing scenarios

2. **Backend Development**
   a. API Design
   b. Database Schema
   c. Authentication System

3. **DevOps & Deployment**
   a. CI/CD Pipeline
   b. Monitoring & Logging
   c. Security Implementation

Project Management Task Lists

# Sprint 1 Tasks

## Backend Development

- [x] Set up project structure
- [x] Configure database connection
- [x] Implement user authentication
    - [x] JWT token generation
    - [x] Login/logout endpoints
    - [ ] Password reset functionality
- [ ] Create API endpoints
    - [x] User management
    - [x] Product catalog
    - [ ] Order processing
    - [ ] Payment integration

## Frontend Development

- [x] Initialize React project
- [x] Set up routing
- [ ] Implement authentication UI
    - [x] Login form
    - [ ] Registration form
    - [ ] Password reset form
- [ ] Product catalog interface
- [ ] Shopping cart functionality

## Testing & QA

- [ ] Unit test coverage > 80%
- [ ] Integration tests for critical paths
- [ ] Manual testing checklist
- [ ] Performance optimization

Documentation Structure

# API Documentation Structure

I. **Getting Started**
A. Installation Guide
B. Quick Start Tutorial
C. Authentication Setup

II. **API Reference**
A. Core Resources

1. Users
   a. Create user
   b. Update user
   c. Delete user
2. Products
   a. List products
   b. Create product
   c. Update product
   B. Advanced Features
1. Webhooks
2. Rate limiting
3. Pagination

III. **Examples & Use Cases**
A. Common Integration Patterns
B. SDK Examples
C. Troubleshooting Guide

Academic Outline Format

# Research Paper Outline

I. **Introduction**
A. Background and Context
B. Problem Statement
C. Research Questions

1. Primary research question
2. Secondary questions
   a. Methodological considerations
   b. Scope limitations

II. **Literature Review**
A. Historical Context
B. Current State of Research
C. Gaps in Existing Knowledge

III. **Methodology**
A. Research Design

1. Quantitative approach
2. Data collection methods
   a. Survey design
   b. Sample selection
   c. Statistical analysis plan
   B. Ethical Considerations

IV. **Results and Discussion**
A. Findings Presentation
B. Statistical Analysis
C. Implications and Interpretations

Configuration Examples

// Basic enhancement
marked.use(markedExtendedLists({
    checkboxClass: 'custom-checkbox',
    listClass: 'enhanced-list'
}));

// Interactive task lists for project management
marked.use(markedExtendedLists({
    interactiveCheckboxes: true,
    checkboxClass: 'task-checkbox',
    onCheckboxChange: (id, checked, metadata) => {
        // Update task status in your database
        updateTaskStatus(metadata.text, checked);

        // Update source Markdown file
        const updatedMarkdown = updateMarkdownCheckbox(
                metadata.rawText,
                metadata.lineNumber,
                checked
        );

        // Save to file or state management
        saveMarkdown(updatedMarkdown);
    }
}));

// Documentation-focused setup
marked.use(markedExtendedLists({
    preserveStartValue: true,
    accessibilityLabels: true,
    listClass: 'documentation-list'
}));

• checkboxAriaLabel: Add ARIA labels to checkboxes for accessibility. Defaults to true.
• useStartAttribute: Include start attribute on ordered lists when first item isn't 1. Defaults to true.
• preserveTightness: Preserve list tightness (loose vs. tight spacing). Defaults to true.
• interactiveCheckboxes: Make checkboxes clickable (not disabled). Defaults to false.
• onCheckboxChange: Callback when checkbox is toggled. Receives (checkboxId, checked, metadata). Defaults to undefined.

Example configuration:

marked.use(markedExtendedLists({
    checkboxClass: 'custom-checkbox',
    checkboxAriaLabel: true,
    useStartAttribute: true
}));

Skipped Numbers: The extension properly handles skipped numbers using the value attribute:

1. First item
3. Third item (skipped 2)
5. Fifth item (skipped 4)

Output:

<ol>
    <li>First item</li>
    <li value="3">Third item (skipped 2)</li>
    <li value="5">Fifth item (skipped 4)</li>
</ol>

Start Attribute: Lists starting mid-sequence include the start attribute:

5. Fifth item
6. Sixth item

Output:

<ol start="5">
    <li>Fifth item</li>
    <li>Sixth item</li>
</ol>

Numbering Systems

The extension supports 5 different numbering systems for ordered lists:

| Marker | Type | Output | Use Case | |---------------|----------------------|--------------------|---------------------------------------| | 1. or 1) | Numeric (decimal) | 1, 2, 3, ... | Standard ordered lists, steps | | a. or a) | Lowercase alphabetic | a, b, c, ... | Sub-items, nested options | | A. or A) | Uppercase alphabetic | A, B, C, ... | Major sections, top-level categories | | i. or i) | Lowercase Roman | i, ii, iii, ... | Formal documents, academic outlines | | I. or I) | Uppercase Roman | I, II, III, ... | Main sections, legal documents | | *, -, + | Unordered (bullets) | • ◦ ▪ | Non-sequential lists, bullet points |

Automatic Type Detection

The extension automatically detects the list type from the first marker and continues the pattern.

Best Practices

1. Use Appropriate Numbering for Context

<!-- Good: Hierarchical outline -->
I. Main Topic
   A. Subtopic
      1. Detail
         a. Minor point

<!-- Avoid: Inconsistent hierarchy -->
1. Main Topic
   1. Subtopic  <!-- ❌ Same type as parent -->

2. Keep Task Descriptions Concise

<!-- Good: Clear, actionable -->
- [ ] Write API documentation
- [ ] Review pull requests

<!-- Avoid: Too verbose -->
- [ ] We need to write comprehensive API documentation...

3. Use Proper Nesting (2-4 spaces)

1. Parent item
   a. Child item (2 spaces)
      i. Grandchild (2 more spaces)

4. Group Related Tasks

## Backend Tasks
- [ ] Database schema
- [ ] API endpoints

## Frontend Tasks
- [ ] Login form
- [ ] Dashboard

Use Cases

See the extensive use case examples in the main documentation for:

• Sprint Planning & Task Tracking
• Documentation Outlines
• Academic Research Papers
• Software Development Checklists
• Meeting Agendas with Action Items

Troubleshooting

Lists Not Rendering Properly

Solutions:

1. Check marker syntax (must include period or parenthesis)
2. Ensure blank lines before/after lists
3. Verify proper indentation for nested lists

Task Checkboxes Not Showing

Solutions:

1. Use correct syntax: - [ ] and - [x] (lowercase x)
2. Ensure extension is registered with marked.use()

Interactive Checkboxes Not Working

Solutions:

1. Enable with interactiveCheckboxes: true
2. Implement onCheckboxChange callback

Framework Integration

See documentation for production-ready examples with:

• React (with hooks and callbacks)
• Vue 3 (with composition API)
• Angular (with change detection)

Performance Tips

1. Use CSS containment for large lists
2. Batch checkbox updates
3. Virtualize lists with 1000+ items

Contributing

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

Related Resources

• Marked.js Documentation
• Extension Demo
• Source Code
• npm Package
• GFM Task Lists Spec

Available Extensions

| Extension | Package | Version | Description | |-------------|--------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------|----------------------------------------------------------------------| | All - Bundle | @fsegurai/marked-extended-bundle | | Includes all extensions in a single package for easy integration | | Accordion | @fsegurai/marked-extended-accordion | | Add collapsible accordion sections to your markdown | | Alert | @fsegurai/marked-extended-alert | | Create styled alert boxes for important information | | Comments | @fsegurai/marked-extended-comments | | Add comment sections with author and timestamp metadata | | Embeds | @fsegurai/marked-extended-embeds | | Easily embed content from various platforms (YouTube, Twitter, etc.) | | Footnote | @fsegurai/marked-extended-footnote | | Add footnotes with automatic numbering | | Kanban | @fsegurai/marked-extended-kanban | | Create kanban boards with customizable columns and cards | | Lists | @fsegurai/marked-extended-lists | | Enhanced list formatting options | | Slide | @fsegurai/marked-extended-slide | | Create slide decks directly from markdown content | | 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.