@fsegurai/marked-extended-alert v15.1.1

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.