https://github.com/bioruebe/markdown-it-collapsible
A markdown-it plugin, which adds collapsibles via the HTML <details> and <summary> elements
https://github.com/bioruebe/markdown-it-collapsible
collapsible markdown-it markdown-it-plugin
Last synced: 9 months ago
JSON representation
A markdown-it plugin, which adds collapsibles via the HTML <details> and <summary> elements
- Host: GitHub
- URL: https://github.com/bioruebe/markdown-it-collapsible
- Owner: Bioruebe
- License: mit
- Created: 2020-04-06T21:35:47.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2024-04-21T09:40:01.000Z (about 2 years ago)
- Last Synced: 2025-07-06T23:19:35.193Z (10 months ago)
- Topics: collapsible, markdown-it, markdown-it-plugin
- Language: TypeScript
- Homepage:
- Size: 142 KB
- Stars: 19
- Watchers: 4
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# markdown-it-collapsible
[](https://www.npmjs.com/package/markdown-it-collapsible) [](https://github.com/Bioruebe/markdown-it-collapsible/actions/workflows/node.js.yml) 
> A markdown-it plugin, which adds collapsibles via the HTML `` and `` elements
## Preview
## Usage
### Install
```bash
npm install markdown-it-collapsible
```
### Enable
```js
// ESM
import MarkdownIt from "markdown-it";
import MarkdownItCollapsible from "markdown-it-collapsible";
const md = new MarkdownIt().use(MarkdownItCollapsible, options);
// CommonJS
const MarkdownIt = require("markdown-it");
const MarkdownItCollapsible = require("markdown-it-collapsible");
const md = MarkdownIt().use(MarkdownItCollapsible, options);
```
### Syntax
```md
+++
+++
```
e.g.
```md
+++ Click me!
Hidden text
+++
```
is interpreted as
```html
Click me!
Hidden text
```
#### Open state
To start in open state, use `++>` instead:
```js
++> Click me!
Hidden text
++>
```
#### Nesting
You can nest collapsibles by adding more `+` characters to the outer elements:
```md
## Closed
++++ Click me!
Hidden text
+++ Nested
Inner hidden text
+++
++++
## Open
+++> Click me!
Hidden text
+++ Nested
Inner hidden text
+++
+++>
```
### Example CSS
Modern browsers don't need additional styling. For better UX you can add a few lines of CSS:
```css
summary {
display: flex;
align-items: start;
outline: none;
list-style: none;
user-select: none;
cursor: pointer;
}
summary > h1, summary > h2, summary > h3, summary > h4, summary > h5, summary > h6 {
display: inline-block;
margin: 0;
}
details > *:not(summary) {
margin-top: 0;
margin-bottom: 0.5rem;
margin-left: 1.25rem;
```
To make the marker scale with headings, an empty span element is created in the parsed HTML. Style the CSS class `details-marker` in any way you like, for example:
```css
.details-marker::before {
content: "▶︎";
display: inline-block;
margin-right: 0.5ch;
flex-shrink: 0;
transition: 0.3s;
}
details[open] > summary .details-marker::before {
transform: rotate(90deg);
transform-origin: 40% 45% 0;
}
```