@fsegurai/marked-extended-lists

A library of extended lists for Marked.js.

@fsegurai/marked-extended-lists is an extension for Marked.js that adds support for extended lists. It allows you to create lists with different types of markers and nested lists with different types of markers, like a., A., i., I., and other patterns to be rendered as <ol> elements with corresponding type values (e.g., <ol type="a">).

It also adds support for lists that start with a custom value or that skips values, by using the value attribute on the list item.

This enables more flexible list formatting in Markdown, enhancing the output to match the intended ordering style.

Table of contents

• Installation
• Usage
  • Basic Usage
  • Supported List Types
  • Advanced Examples
  • Configuration Options
• 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@^15.0.0 --save

Usage

Basic Usage

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

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

const exampleMarkdown = `
1. item 1
2. item 2
    a. item 2a
        I.  sub item I
        II. sub item II
    e. item 2e
7. item 7
`;

marked.parse(exampleMarkdown);

Supported List Types

This extension recognizes and properly formats the following list markers:

• Numeric lists- Standard numbered list formatting (e.g., 1., 2., etc.).
• Lowercase alphabetic lists - Letters list formatting (e.g., a., b., etc.).
• Uppercase alphabetic lists - Letters list formatting (e.g., A., B., etc.).
• Lowercase Roman numerals - Roman numerals formatting (e.g., i., ii., iii., etc.).
• Uppercase Roman numerals - Roman numerals formatting (e.g., I., II., III., etc.).
• Task lists - Check and Unchecked items (e.g., [ ], [X], etc.).

Lists can be nested with different marker types at each level of nesting, and the extension will maintain correct formatting and indentation.

Advanced Examples

Different List Types

# Different List Types

## Numeric Lists
1. First item
2. Second item
3. Third item

## Alphabetic Lists (lowercase)
a. Item a
b. Item b
c. Item c

## Alphabetic Lists (uppercase)
A. Item A
B. Item B
C. Item C

## Roman Numeral Lists (lowercase)
i. Item i
ii. Item ii
iii. Item iii

## Roman Numeral Lists (uppercase)
I. Item I
II. Item II
III. Item III

Nested Lists with Different Types

# Nested Lists

1. First level (numeric)
   a. Second level (lowercase alpha)
      i. Third level (lowercase roman)
         - Fourth level (bullet)
            I. Fifth level (uppercase roman)
               A. Sixth level (uppercase alpha)

2. Back to the first level

Task Lists

# Task List

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

List with Skipped Numbers

# List with Skipped Numbers

1. First item
3. Third item (skips #2 will render with the value="3" attribute)
5. Fifth item (skips #4, will render with a value="5" attribute)

Mixed List Types

# Documentation Outline

1. Introduction
   a. Background
   b. Purpose
      i. Primary goals
      ii. Secondary goals
   c. Scope

2. Installation
   - System requirements
   - [ ] Download package
   - [x] Run installer
   - [ ] Configure settings

3. Usage Examples
   I. Basic commands
   II. Advanced features
      A. Feature one
      B. Feature two
         i. Sub-feature
         ii. Another sub-feature

Configuration Options

The marked-extended-lists extension inherits configuration options from Marked. Key options that affect list behavior include:

marked.use(markedExtendedLists(), {
    // These options affect how the extension processes lists
    gfm: true, // Enable GFM (GitHub Flavored Markdown) including task lists
    pedantic: false, // Set to true for pedantic behavior with whitespace and indentation
});

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.