A library of extended alert blocks for Marked.js.

@fsegurai/marked-extended-alert is an extension for Marked.js that adds support for GitHub-style alert blocks, allowing you to create visually distinct note, warning, tip, and other information boxes in your Markdown content. It supports any Markdown rendering within alerts and is highly customizable to fit your needs.

Table of contents

• Installation
• Usage
  • Basic Usage
  • Configuration Options
  • Available Alert Types
• More Resources
  • Available Extensions
  • Demo Application
• License

Installation

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

bun install @fsegurai/marked-extended-alert marked@^15.0.0 --save

Usage

Basic Usage

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

import { marked } from "marked";
import markedExtendedAlert from "@fsegurai/marked-extended-alert";

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

// Basic usage
marked.use(markedExtendedAlert());

const exampleMarkdown = `
> [!NOTE]
> This is a note alert with a **bold text** and a [link](https://example.com).
> - Item 1
> - Item 2

> [!WARNING]
> This is a warning alert.

> [!TIP]
> This is a tip alert.

> [!NOTE]
> This alert contains a table:
>
> | Header 1 | Header 2 |
> |----------|----------|
> | Cell 1   | Cell 2   |
> | Cell 3   | Cell 4   |
`;

marked.parse(exampleMarkdown);


```javascript
import { marked } from "marked";
import markedExtendedAlert from "@fsegurai/marked-extended-alert";

// Configure with custom options
marked.use(
  markedExtendedAlert({
    className: 'custom-alert',
    variants: [
      {
        type: 'success',
        icon: '<svg class="custom-icon"></svg>',
        title: 'Success!',
      }
    ],
    injectStyles: true
  })j
);

const customMarkdown = \`
> [!SUCCESS]
> This is a custom success alert with nested markdown:
> - Item with **bold text**
> - Another item with \`code\`
\`;

const result = marked.parse(customMarkdown);

Configuration Options

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

• className: The base CSS class name for alerts. Defaults to 'marked-extended-alert.'
• variants: Array of custom variants to override or extend the default ones. The structure should look like this:

  {
    type: 'success',
    icon: '<svg class="custom-icon"></svg>',
    title: 'Success!',
  }

• injectStyles: Whether to automatically inject CSS styles. Defaults to true.

Available Alert Types

• NOTE: A note alert, typically used for additional information or tips.

> [!NOTE]
> This is a note alert.

• TIP: A tip alert, often used for helpful hints or suggestions.

> [!TIP]
> This is a tip alert.

• IMPORTANT: An important alert, used for critical information that requires attention.

> [!IMPORTANT]
> This is an important alert.

• WARNING: A warning alert, indicating potential issues or caution.

> [!WARNING]
> This is a warning alert.

• CAUTION: A caution alert, similar to a warning but with a different emphasis.

> [!CAUTION]
> This is a caution alert.

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.