remark-clickable-spoiler

A remark plugin to replace ||spoiler||s with JavaScript-free spoiler blocks that changes state on click.

Example

import { remark } from "remark";
import remarkSpoiler from "remark-clickable-spoiler";

const result = await remark()
  .use(remarkSpoiler)
  .process("This is ||a spoiler||!");

Pretty-printed result:

This is
<label class="spoiler">
  <input class="spoiler__toggle" type="checkbox" aria-label="Spoiler">
  <span class="spoiler__mask">a spoiler</span>
</label>!

Styling

This plugin only converts the spoiler syntax to a stylable structure. It does not inject the CSS for styling or controlling the behaviour of spoiler blocks. You must load your own CSS to make the spoiler behaviour work. You may adapt from one of these sample stylesheets:

• CSS
• SCSS
• Sass

Options

interface RemarkSpoilerOptions {
  ariaLabel?: string;
}

• ariaLabel: Custom accessible label for the spoiler toggle. Defaults to "Spoiler".

To import the options interface:

import { type RemarkSpoilerOptions } from "remark-clickable-spoiler";