@gerhobbelt/markdown-it-collapsible

markdown-it-collapsible

A markdown-it plugin, which adds collapsibles via the HTML <details> and <summary> elements

Preview

Usage

Install

npm install markdown-it-collapsible

Enable

const markdown_it = require("markdown-it");
const markdown_it_collapsible = require("markdown-it-collapsible");
const md = markdown_it().use(markdown_it_collapsible, options);

Syntax

+++ <visible_text>
<hidden_text>
+++

e.g.

+++ Click me!
Hidden text
+++

is interpreted as

<details>
	<summary>
        <span class="details-marker">
            &nbsp;
        </span>
        Click me!
    </summary>
    <p>
        Hidden text
    </p>
</details>

Example CSS

details > summary:first-of-type {
	list-style-type: none;
}

::-webkit-details-marker {
	display: none;
}

summary {
	outline: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-ms-user-select: none;
	cursor: pointer;
}

details > summary .details-marker:before {
	content: "\25BA";
}

details[open] > summary .details-marker:before {
	content: "\25BC";
}

details > *:not(summary) {
	padding-left: 1.25em;
}