Package Exports

@quadratz/micromark-extension-spoiler
@quadratz/micromark-extension-spoiler/package.json

Readme

micromark-extension-spoiler

THIS PACKAGE IS STILL A WORK IN PROGRESS. BREAKING CHANGES MAY BE INTRODUCED BETWEEN VERSIONS.

A micromark extension that adds support for spoiler syntax.

Features

Nested markers supported. e.g., ||A **B** C||.
Customizable marker syntax. The default is ||.
Customizable HTML output. The default is <span class="spoiler">…</span>.

Example

Markdown:

Hello ||spoiler|| world.

Code:

import { micromark } from "micromark";
import { spoiler, spoilerHtml } from "@qz/micromark-extension-spoiler";

const markdown = "Hello ||spoiler|| world.";

const result = micromark(markdown, {
  extensions: [spoiler()],
  htmlExtensions: [spoilerHtml()],
});

console.log(result);

Output:

<p>Hello <span class="spoiler">spoiler</span> world.</p>

Installation

From JSR.io:

# Deno
deno add jsr:@qz/micromark-extension-spoiler
# Bun
bunx jsr add @qz/micromark-extension-spoiler
# pnpm
pnpm i jsr:@qz/micromark-extension-spoiler
# Yarn
yarn add jsr:@qz/micromark-extension-spoiler
# npm
npx jsr add jsr:@qz/micromark-extension-spoiler

From npmjs.com:

# Deno
deno add npm:@quadratz/micromark-extension-spoiler
# Bun
bun add @quadratz/micromark-extension-spoiler
# pnpm
pnpm add @quadratz/micromark-extension-spoiler
# Yarn
yarn add @quadratz/micromark-extension-spoiler
# npm
npm install @quadratz/micromark-extension-spoiler

API

`spoiler`

function spoiler(options?: SpoilerOptions): Extension;

Create an extension for micromark to support spoiler syntax.

Example:

import { micromark } from "micromark";
import { spoiler, spoilerHtml } from "@qz/micromark-extension-spoiler";

const result = micromark("A ||B||", {
  extensions: [spoiler()],
  htmlExtensions: [spoilerHtml()],
});

console.log(result); // <p>A <span class="spoiler">B</span></p>

`SpoilerOptions`

interface SpoilerOptions {
  code: number;
}

Options for spoiler.

`SpoilerOptions.code`

The character code used for the spoiler marker.

You can use the micromark-util-symbol to get the correct code.

For example, to use an exclamation mark (!) as the marker:

import { micromark } from "micromark";
import { codes } from "micromark-util-symbol";
import { spoiler, spoilerHtml } from "@qz/micromark-extension-spoiler";

const result = micromark("!!SECRET!!", {
  extensions: [spoiler({ code: codes.exclamationMark })],
  htmlExtensions: [spoilerHtml()],
});

console.log(result); // <p><span class="spoiler">SECRET</span></p>

The default is 124, which is a character code for vertical bar (|).

`spoilerHtml`

function spoilerHtml(options?: SpoilerHtmlOptions): HtmlExtension;

Creates an HTML extension for micromark to support spoiler when converting Markdown to HTML.

Example:

import { micromark } from "micromark";
import { spoiler, spoilerHtml } from "@qz/micromark-extension-spoiler";

const result = micromark("A ||B||", {
  extensions: [spoiler()],
  htmlExtensions: [spoilerHtml()],
});

console.log(result); // <p>A <span class="spoiler">B</span></p>

`SpoilerHtmlOptions`

interface SpoilerHtmlOptions {
  openingTag?: string;
  closingTag?: string;
}

Options for spoilerHtml.

`SpoilerOptions.openingTag`

HTML tag used at the start of a spoiler.

Example:

micromark("A ||B||", {
  extensions: [spoiler()],
  htmlExtensions: [
    spoilerHtml({
      openingTag: "<spoiler>",
      closingTag: "</spoiler>",
    }),
  ],
});

Output:

<p>A <spoiler>B</spoiler></p>

The default value is <span class="spoiler">.

`SpoilerOptions.closingTag`

HTML tag used at the end of a spoiler.

Example:

micromark("A ||B||", {
  extensions: [spoiler()],
  htmlExtensions: [
    spoilerHtml({
      openingTag: "<spoiler>",
      closingTag: "</spoiler>",
    }),
  ],
});

Output:

<p>A <spoiler>B</spoiler></p>

The default value is </span>.