{"id":22208869,"url":"https://github.com/bioruebe/markdown-it-collapsible","last_synced_at":"2025-07-27T09:30:43.779Z","repository":{"id":44638523,"uuid":"253621013","full_name":"Bioruebe/markdown-it-collapsible","owner":"Bioruebe","description":"A markdown-it plugin, which adds collapsibles via the HTML \u003cdetails\u003e and \u003csummary\u003e elements","archived":false,"fork":false,"pushed_at":"2024-04-21T09:40:01.000Z","size":145,"stargazers_count":19,"open_issues_count":1,"forks_count":2,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-07-06T23:19:35.193Z","etag":null,"topics":["collapsible","markdown-it","markdown-it-plugin"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Bioruebe.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-04-06T21:35:47.000Z","updated_at":"2025-04-03T05:26:45.000Z","dependencies_parsed_at":"2023-10-17T12:15:43.944Z","dependency_job_id":"2f093c6a-fbe1-47a4-b89a-34bb7659a42c","html_url":"https://github.com/Bioruebe/markdown-it-collapsible","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/Bioruebe/markdown-it-collapsible","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bioruebe%2Fmarkdown-it-collapsible","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bioruebe%2Fmarkdown-it-collapsible/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bioruebe%2Fmarkdown-it-collapsible/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bioruebe%2Fmarkdown-it-collapsible/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Bioruebe","download_url":"https://codeload.github.com/Bioruebe/markdown-it-collapsible/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bioruebe%2Fmarkdown-it-collapsible/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267338520,"owners_count":24071364,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-27T02:00:11.917Z","response_time":82,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["collapsible","markdown-it","markdown-it-plugin"],"created_at":"2024-12-02T19:23:26.781Z","updated_at":"2025-07-27T09:30:43.460Z","avatar_url":"https://github.com/Bioruebe.png","language":"TypeScript","readme":"# markdown-it-collapsible\n\n[![npm](https://img.shields.io/npm/v/markdown-it-collapsible)](https://www.npmjs.com/package/markdown-it-collapsible) [![Node.js CI](https://github.com/Bioruebe/markdown-it-collapsible/actions/workflows/node.js.yml/badge.svg)](https://github.com/Bioruebe/markdown-it-collapsible/actions/workflows/node.js.yml) ![markdown-it](https://img.shields.io/npm/dependency-version/markdown-it-collapsible/peer/markdown-it)\n\n\u003e A markdown-it plugin, which adds collapsibles via the HTML `\u003cdetails\u003e` and `\u003csummary\u003e` elements\n\n## Preview\n\n![preview](docs/preview.png)\n\n## Usage\n\n### Install\n\n```bash\nnpm install markdown-it-collapsible\n```\n\n### Enable\n\n```js\n// ESM\nimport MarkdownIt from \"markdown-it\";\nimport MarkdownItCollapsible from \"markdown-it-collapsible\";\nconst md = new MarkdownIt().use(MarkdownItCollapsible, options);\n\n// CommonJS\nconst MarkdownIt = require(\"markdown-it\");\nconst MarkdownItCollapsible = require(\"markdown-it-collapsible\");\nconst md = MarkdownIt().use(MarkdownItCollapsible, options);\n```\n\n### Syntax\n\n```md\n+++ \u003cvisible_text\u003e\n\u003chidden_text\u003e\n+++\n```\n\ne.g.\n\n```md\n+++ Click me!\nHidden text\n+++\n```\n\nis interpreted as\n\n```html\n\u003cdetails\u003e\n    \u003csummary\u003e\n        \u003cspan class=\"details-marker\"\u003e\u003c/span\u003e\n        Click me!\n    \u003c/summary\u003e\n    \u003cp\u003e\n        Hidden text\n    \u003c/p\u003e\n\u003c/details\u003e\n```\n\n#### Open state\n\nTo start in open state, use `++\u003e` instead:\n\n```js\n++\u003e Click me!\nHidden text\n++\u003e\n```\n\n#### Nesting\n\nYou can nest collapsibles by adding more `+` characters to the outer elements:\n\n```md\n## Closed\n++++ Click me!\nHidden text\n+++ Nested\nInner hidden text\n+++\n++++\n\n## Open\n+++\u003e Click me!\nHidden text\n+++ Nested\nInner hidden text\n+++\n+++\u003e\n```\n\n### Example CSS\n\nModern browsers don't need additional styling. For better UX you can add a few lines of CSS:\n\n```css\nsummary {\n  display: flex;\n  align-items: start;\n  outline: none;\n  list-style: none;\n  user-select: none;\n  cursor: pointer;\n}\n\nsummary \u003e h1, summary \u003e h2, summary \u003e h3, summary \u003e h4, summary \u003e h5, summary \u003e h6 {\n  display: inline-block;\n  margin: 0;\n}\n\ndetails \u003e *:not(summary) {\n  margin-top: 0;\n  margin-bottom: 0.5rem;\n  margin-left: 1.25rem;\n```\n\nTo 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: \n\n```css\n.details-marker::before {\n  content: \"▶︎\";\n  display: inline-block;\n  margin-right: 0.5ch;\n  flex-shrink: 0;\n  transition: 0.3s;\n}\n\ndetails[open] \u003e summary .details-marker::before {\n  transform: rotate(90deg);\n  transform-origin: 40% 45% 0;\n}\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbioruebe%2Fmarkdown-it-collapsible","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbioruebe%2Fmarkdown-it-collapsible","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbioruebe%2Fmarkdown-it-collapsible/lists"}