markdown-it-reddit-spoiler

Reddit style spoilers for markdown-it by ${Mr.DJA}.

This is a plugin for markdown-it uses markdown-it-regexp to render spoilers like those on Reddit: >!spoiler!<. Sounds good huh? ^-^

Install:

Node.js:

To install the plugin simply use this command:

npm install markdown-it-reddit-spoiler --save

Then simply require it:

const markdownitRedditSpoiler = require("markdown-it-reddit-spoiler");
// => object

This method will work on Node, but it can also work on browser after compiling it using Webpack.

Browser:

A pre-compiled version for browser is available on JsDeliver CDN:

<script src='https://cdn.jsdelivr.net/gh/iMrDJAi/markdown-it-reddit-spoiler/dist/main.js'></script>

It will be declared as window.markdownitRedditSpoiler:

const markdownitRedditSpoiler = window.markdownitRedditSpoiler;
// => object

Usage:

You will see these methods and properties on the returned object:

Name	Description
spoiler	This will render spoilers for you <3
blockquote	This is required to stop blockquotes from overriding spoilers
nestedRenderer	This is required to render the nested tags inside spoilers
env	This is needed to enable references outside spoilers
openTag	This is used to customize the open tag of spoilers since HTML doesn't have a real spoiler tag
closeTag	This one is for customizing the spoilers close tag

This is a simple example:

const markdownit = require('markdown-it'); //Our markdown renderer
const markdownitRedditSpoiler = require('markdown-it-reddit-spoiler'); //Our package

function renderMarkdown(text) { //A function to render markdown from a given string

    //This will deal with references
    let env = {};
    markdownit('zero').enable('reference').parse(text, env);
    markdownitRedditSpoiler.env = env;

    //The main renderer
    var mdRender = markdownit({
        linkify: true,
    }).use(markdownitRedditSpoiler.spoiler) //Spoilers enabled
    .use(markdownitRedditSpoiler.blockquote); //Spoilers friendly block quotes enabled

    return mdRender.render(text); //Render Markdown!
}

Then add some css:

.md-spoiler {
  display: inline-block;
  background: #1b1b1b;
  border-radius: 4px;
  padding: 4px;
}

.md-spoiler>* {
  z-index: -1;
  opacity: 0;
  position: relative;
}

.md-unhidenspoiler>* {
  opacity: 1 !important;
  z-index: 1 !important;
}

Preview:

A more advanced example:

const markdownit = require('markdown-it'); //Our markdown renderer
const markdownitIns = require('markdown-it-ins'); //Another optional plugin
const markdownitRedditSpoiler = require('markdown-it-reddit-spoiler'); //Our package

function renderMarkdown(text) { //A function to render markdown from a given string

    //This will deal with references
    let env = {};
    markdownit('zero').enable('reference').parse(text, env);
    markdownitRedditSpoiler.env = env;

    //This one is for customizing the nested tags renderer
    markdownitRedditSpoiler.nestedRenderer = function () {
        let renderer = markdownit({
             linkify: true,
        }).disable('table').disable('list').disable('heading')
        .disable('lheading').disable('fence')
        .disable('blockquote').disable('code').disable('hr')
        .use(markdownitIns); //Now markdownitIns will work inside spoilers
        return renderer;
    }

    //It's very simple to customize the open/close tag of spoilers
    markdownitRedditSpoiler.openTag = '<details><summary>Spoiler ⚠</summary>';
    markdownitRedditSpoiler.closeTag = '</details>';

    //The main renderer
    var mdRender = markdownit({
        linkify: true,
    }).use(markdownitIns)
    .use(markdownitRedditSpoiler.spoiler) //Spoilers enabled
    .use(markdownitRedditSpoiler.blockquote); //Spoilers friendly block quotes enabled

    return mdRender.render(text); //Render Markdown!
}

Preview:

Enjoy <3.

Dependents Projects:

Wanna use markdown-it-reddit-spoiler on your next big project? Let me now and it will be listed here! :)

vscode-markdown-reddit-spoiler: A Visual Studio Code extension that adds support for the Reddit >!spoiler!< syntax to the built-in markdown preview. - by @AbhijeetKrishnan.
iMrDJAi-MDE: Open source, Simple, Easy to use and fully featured Markdown editor - by me.

Notes:

This package has made by ${Mr.DJA}.
Do you like it? Gimme a star ⭐ and I'll smile 😃.
You are free to suggest anything and I will try to add it soon if I found it useful.
If you found any mistake (including the README file) feel free to help to fix it.
Please report any bugs.
Made with ❤ in Algeria 🇩🇿.

imrdjai / markdown-it-reddit-spoiler Goto Github PK