@fsegurai/marked-extended-spoiler v15.2.1

A library of extended spoiler blocks for Marked.js.

@fsegurai/marked-extended-spoiler is an extension for Marked.js that adds support for extended spoiler blocks, allowing the creation of hidden content that appears on hover. It supports any Markdown rendering and can be customized to fit your needs. In the contrary case, 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-spoiler along with Marked.js to your package.json use the following commands.

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

Usage

Basic Usage

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

spoiler is the alias for the extended spoiler block.

import { marked } from "marked";
import markedExtendedSpoiler from "@fsegurai/marked-extended-spoiler";

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

marked.use(markedExtendedSpoiler());

const exampleMarkdown = `
::::spoiler{title="Hover on text"}
This is a hidden code block that will only appear on hover. Some text later it will be all over again and again, so be sure that it will work
::::spoilerend
`;

marked.parse(exampleMarkdown);

Aliases

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

• Start Aliases
  • :sp
  • :spoiler
• End Aliases
  • :spend
  • :spoilerend

Configuration Options

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

• prefixId: The prefix ID for spoiler elements. Defaults to 'spoiler-'.
• template: Custom HTML template for spoiler rendering. Defaults to the built-in template.
• customizeToken: A function that allows you to customize the token object.
• injectStyles: A boolean value that determines whether to inject default styles. Defaults to true.
• cssVariables: CSS variables for spoiler styling:
  • {animationDuration}: Sets the duration for the spoiler animations. Defaults to '1s.'
  • {padding}: Padding for the spoiler content. Defaults to '12px.'
  • {borderRadius}: Border radius for the spoiler container. Defaults to '6px.'
  • {transitionTiming}: Timing function for transitions. Defaults to 'ease-out.'

Spoiler syntax parameters:

• title: The title of the spoiler block.
• theme: The theme of the spoiler block.
  • default: Default theme with a simple hover effect.
  • dark: Dark theme with a more pronounced hover effect.
  • light: Light theme with a subtle hover effect.
  • danger: A theme with a red background
  • info: A theme with a blue background
  • warning: A theme with a yellow background
  • success: A theme with a green background

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 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.