Project: Darkhax/remark-spoiler

Package: remark-spoiler@1.0.6

  1. Dependents: 0
  2. A remark plugin which adds spoiler support.
  1. remark 214
  2. markdown 154
  3. plugin 140

remark-spoiler npm version

A remark plugin that adds support for spoiler text. By default spoiler text is defined by wrapping text with ||.

A video showing spoiler text. The text is obscured until the cursor of the user is above the text.


npm install remark-spoiler

For best results you should use remark-html or similar.


Import the plugin and then pass it into remark or your unified processor chain.

import remark from 'remark';
import html from 'remark-html';
import spoiler from 'remark-spoiler';

remark.use(html).use(spoiler).process("||hello world||");

With this plugin the resulting HTML will be

<span class="spoiler">hello world</span>

Note: HTML does not have native support for "spoiler" text. This plugin applies a class name which allows CSS to apply custom formatting, however the plugin does not provide this CSS for you. There are many ways to style your spoilers, here is one example.

.spoiler { 
    color: black; 


You may supply an optional options object to configure the plugin. These are the options currently supported.


const spoilerOptions = {
    marker: '!!',
    classNames: ['thing1', 'thing2']

remark().use(html).use(spoiler, spoilerOptions).process("!!I Am Secret!!");


MIT © Darkhax