A library of extended accordion blocks for Marked.js.

@fsegurai/marked-extended-accordion is an extension for Marked.js that adds support for extended accordion blocks, allowing the creation of expandable panels with content. It supports any Markdown rendering and can be customized to fit your needs. Without the marked instance, it will have some limitations while rendering the content.

Table of contents

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

Installation

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

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

Usage

Basic Usage

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

accordion is the identifier for the extended accordion block.

import { marked } from "marked";
import markedExtendedAccordion from "@fsegurai/marked-extended-accordion";

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

marked.use(markedExtendedAccordion());

const exampleMarkdown = `
::::accordion{title="Simple Accordion"}
This is the content of the accordion.

- Item 1
- Item 2
::::accordionend

::::accordion{title="Expanded Accordion" expanded="true"}
This accordion is expanded by default.
::::accordionend

::::accordion{title="Custom Heading" level="3"}
This accordion has a custom heading level.
::::accordionend

::::accordion{title="Custom Class" level="2" class="special-accordion"}
This accordion has a custom class.
::::accordionend
`;

marked.parse(exampleMarkdown);

By default, this plugin includes basic styles for the accordion blocks. You can customize the styling by providing your own template or adding additional CSS.

Aliases

The accordion block can be rendered using alternative aliases respectively for start and end block. Some of them are:

• Start Aliases
  • :acc
  • :accordion
• End Aliases
  • :accend
  • :accordionend

Configuration Options

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

• className: The base CSS class name for accordions. Defaults to 'marked-extended-accordion.'
• prefixId: The prefix ID for accordion elements. Defaults to 'accordion-'.
• animationDuration: Sets the duration for the accordion's animations. Defaults to '0.3s.'
• template: A custom template for the accordion HTML. Defaults to the built-in template.
• customizeToken: A function that allows you to customize the token object. Defaults to null.
• injectStyles: A boolean value that determines whether to inject default styles. Defaults to true.

Accordion syntax parameters:

• title: The title of the accordion header. Defaults to 'Accordion.'
• expanded: Whether the accordion is expanded by default ("true" or "false"). Defaults to "false."
• duration: The duration of the animation for the accordion. Defaults to 1 s.
• level: The heading level for the title (1–6). Defaults to 3.

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.