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

@fsegurai/marked-extended-bundle A bundle of extensions for Marked.js

🎯 Overview

The marked-extended-bundle combines all Marked.js extension packages into a single, convenient export. It provides a complete toolkit for advanced Markdown parsing and rendering, including accordions, alerts, comments, embeds, footnotes, Kanban boards, enhanced lists, slides, spoilers, tables, tabs, timelines, and typography enhancements.

✨ Key Features

• 📦 Complete Bundle: All extensions in one package
• 🎨 Rich Markdown Features: 13+ extensions for enhanced markdown rendering
• 🔧 Framework Agnostic: Works with React, Vue, Angular, Svelte, and vanilla JS
• ⚡ Performance Optimized: Minimal overhead, efficient rendering
• 🌗 Theme Support: Light and dark mode out of the box
• 📱 Responsive: Works seamlessly across all device sizes
• ♿ Accessible: Semantic HTML with proper ARIA attributes
• 🎯 TypeScript Support: Full type definitions for all extensions

🎪 Live Demo

Experience all extensions in action: View Demo

Table of contents

• Installation
• Usage
  • Basic Usage
• Quick Start
  • Individual Packages
  • Styling
  • Framework Integration
  • TypeScript Support
• More Resources
  • Available Extensions
  • Demo Application
• License

Installation

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

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

Usage

Basic Usage

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

Quick Start

Installation

Install the bundle along with marked:

# Using Bun (recommended)
bun add @fsegurai/marked-extended-bundle marked@^17

# Using npm
npm install @fsegurai/marked-extended-bundle marked@^17

# Using yarn
yarn add @fsegurai/marked-extended-bundle marked@^17

# Using pnpm
pnpm add @fsegurai/marked-extended-bundle marked@^17

Basic Implementation

import { marked } from 'marked';
import {
  markedExtendedAccordion,
  markedExtendedAlert,
  markedExtendedComments,
  markedExtendedEmbeds,
  markedExtendedFootnote,
  markedExtendedKanban,
  markedExtendedLists,
  markedExtendedSlide,
  markedExtendedSpoiler,
  markedExtendedTables,
  markedExtendedTabs,
  markedExtendedTimeline,
  markedExtendedTypographic,
} from '@fsegurai/marked-extended-bundle';

// Register all extensions
marked.use(
  markedExtendedAccordion(),
  markedExtendedAlert(),
  markedExtendedComments(),
  markedExtendedEmbeds(),
  markedExtendedFootnote(),
  markedExtendedKanban(),
  markedExtendedLists(),
  markedExtendedSlide(),
  markedExtendedSpoiler(),
  markedExtendedTables(),
  markedExtendedTabs(),
  markedExtendedTimeline(),
  markedExtendedTypographic(),
);

// Your markdown content
const markdown = `
# Your markdown with all extensions

> [!NOTE]
> This bundle includes all marked-extended features.

## Accordions, alerts, and more

Use any of the supported syntax for enhanced markdown.
`;

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

import { marked } from 'marked';
import markedExtendedBundle from '@fsegurai/marked-extended-bundle';

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

marked.use(markedExtendedBundle());

Styling Your Extensions

Each extension includes optional CSS files. Import them to enable visual styling:

// Import structural styles (required for functionality)
import '@fsegurai/marked-extended-accordion/dist/styles/accordion.css';
import '@fsegurai/marked-extended-alert/dist/styles/alert.css';
import '@fsegurai/marked-extended-comments/dist/styles/comment.css';
import '@fsegurai/marked-extended-embeds/dist/styles/embed.css';
import '@fsegurai/marked-extended-footnote/dist/styles/footnote.css';
import '@fsegurai/marked-extended-kanban/dist/styles/kanban.css';
import '@fsegurai/marked-extended-lists/dist/styles/lists.css';
import '@fsegurai/marked-extended-slide/dist/styles/slide.css';
import '@fsegurai/marked-extended-spoiler/dist/styles/spoiler.css';
import '@fsegurai/marked-extended-tables/dist/styles/table.css';
import '@fsegurai/marked-extended-tabs/dist/styles/tabs.css';
import '@fsegurai/marked-extended-timeline/dist/styles/timeline.css';

// Optional: Import themes for styled appearance
import '@fsegurai/marked-extended-accordion/dist/styles/accordion-theme.css';
import '@fsegurai/marked-extended-alert/dist/styles/alert-theme.css';
// ... other themes

Or via HTML (for non-build tools):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fsegurai/marked-extended-accordion@latest/dist/styles/accordion.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fsegurai/marked-extended-alert@latest/dist/styles/alert-theme.css">
<!-- ... other stylesheets -->

With Configuration Options

Each extension accepts its own configuration options:

marked.use(
  markedExtendedAccordion({
    className: 'custom-accordion',
    animationDuration: '0.5s'
  }),
  markedExtendedAlert({
    className: 'custom-alert'
  }),
  markedExtendedLists({
    useStartAttribute: true,
    interactiveCheckboxes: true
  }),
  markedExtendedTabs({
    animation: 'fade'
  }),
  // ... other extensions with options
);

See individual extension documentation for all available options.

TypeScript Support

Full TypeScript support with exported types for all extensions:

import type {
  AccordionOptions,
  AccordionToken,
  AlertOptions,
  AlertToken,
  CommentsOptions,
  CommentToken,
  EmbedsOptions,
  EmbedToken,
  FootnoteOptions,
  FootnoteRefToken,
  KanbanOptions,
  KanbanToken,
  ListsOptions,
  ExtendedListToken,
  SlideOptions,
  SlideToken,
  SpoilerOptions,
  SpoilerToken,
  TablesOptions,
  SpanTableToken,
  TabsOptions,
  TabsToken,
  TimelineOptions,
  TimelineToken,
  TypographicOptions,
} from '@fsegurai/marked-extended-bundle';

Framework Integration

React Integration

import { marked } from 'marked';
import { 
  markedExtendedAccordion,
  markedExtendedAlert,
  // ... other extensions
} from '@fsegurai/marked-extended-bundle';
import { useEffect, useState } from 'react';

marked.use(
  markedExtendedAccordion(),
  markedExtendedAlert(),
  // ... register all extensions
);

export function MarkdownViewer({ content }: { content: string }) {
  const [html, setHtml] = useState('');

  useEffect(() => {
    setHtml(marked.parse(content));
  }, [content]);

  return <div dangerouslySetInnerHTML={{ __html: html }} />;
}

Vue 3 Integration

<script setup lang="ts">
import { marked } from 'marked';
import { 
  markedExtendedAccordion,
  markedExtendedAlert,
  // ... other extensions
} from '@fsegurai/marked-extended-bundle';
import { ref, computed } from 'vue';

marked.use(
  markedExtendedAccordion(),
  markedExtendedAlert(),
  // ... register all extensions
);

interface Props {
  content: string;
}

const props = defineProps<Props>();
const html = computed(() => marked.parse(props.content));
</script>

<template>
  <div v-html="html" />
</template>

Angular Integration

import { Component, Input, OnChanges } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
import { marked } from 'marked';
import { 
  markedExtendedAccordion,
  markedExtendedAlert,
  // ... other extensions
} from '@fsegurai/marked-extended-bundle';

marked.use(
  markedExtendedAccordion(),
  markedExtendedAlert(),
  // ... register all extensions
);

@Component({
  selector: 'app-markdown-viewer',
  template: `<div [innerHTML]="parsedContent"></div>`,
})
export class MarkdownViewerComponent implements OnChanges {
  @Input() content: string = '';
  parsedContent: SafeHtml = '';

  constructor(private sanitizer: DomSanitizer) {}

  ngOnChanges(): void {
    const html = marked.parse(this.content);
    this.parsedContent = this.sanitizer.bypassSecurityTrustHtml(html);
  }
}

Svelte Integration

<script lang="ts">
  import { marked } from 'marked';
  import { 
    markedExtendedAccordion,
    markedExtendedAlert,
    // ... other extensions
  } from '@fsegurai/marked-extended-bundle';

  marked.use(
    markedExtendedAccordion(),
    markedExtendedAlert(),
    // ... register all extensions
  );

  export let content: string;

  $: html = marked.parse(content);
</script>

<div>{@html html}</div>

Browser Support

• Chrome ≥ 111
• Edge ≥ 111
• Firefox ≥ 114
• Safari ≥ 16.4

For older browser support, use @vitejs/plugin-legacy.

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

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.