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 = ;// => 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:
It will be declared as window.markdownitRedditSpoiler
:
const markdownitRedditSpoiler = windowmarkdownitRedditSpoiler;// => 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 = ; //Our markdown rendererconst markdownitRedditSpoiler = ; //Our package { //A function to render markdown from a given string //This will deal with references let env = {}; ; markdownitRedditSpoilerenv = env; //The main renderer var mdRender = //Spoilers enabled ; //Spoilers friendly block quotes enabled return mdRender; //Render Markdown!}
Then add some css:
Preview:
A more advanced example:
const markdownit = ; //Our markdown rendererconst markdownitIns = ; //Another optional pluginconst markdownitRedditSpoiler = ; //Our package { //A function to render markdown from a given string //This will deal with references let env = {}; ; markdownitRedditSpoilerenv = env; //This one is for customizing the nested tags renderer markdownitRedditSpoiler { let renderer = ; //Now markdownitIns will work inside spoilers return renderer; } //It's very simple to customize the open/close tag of spoilers markdownitRedditSpoileropenTag = '<details><summary>Spoiler ⚠</summary>'; markdownitRedditSpoilercloseTag = '</details>'; //The main renderer var mdRender = //Spoilers enabled ; //Spoilers friendly block quotes enabled return mdRender; //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! :)
- 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 🇩🇿.