@gerhobbelt/markdown-it-collapsible
v1.0.0-3
Published
A markdown-it plugin, which adds collapsibles via the HTML <details> and <summary> elements
Downloads
6
Maintainers
Readme
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">
</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;
}