markdown-it-admon-collapsible 1.9.1

package/CHANGELOG.md

@@ -0,0 +1,3 @@
+# 1.9.1 (2025-12-26)
+
+- forked from markdown-it-admon

package/LICENSE

@@ -0,0 +1,24 @@
+Copyright (c) 2015 Vitaly Puzrin, Alex Kocharin.
+Copyright (c) 2018 jebbs 
+Copyright (c) 2021- commenthol
+
+Permission is hereby granted, free of charge, to any person
+obtaining a copy of this software and associated documentation
+files (the "Software"), to deal in the Software without
+restriction, including without limitation the rights to use,
+copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the
+Software is furnished to do so, subject to the following
+conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,81 @@
+# markdown-it-admon-collapsible
+
+> **Note:** This package is a fork of [markdown-it-admon](https://github.com/commenthol/markdown-it-admon) with added support for collapsible blocks (???), inspired by Material for MkDocs.
+
+> Plugin for creating admonitions for [markdown-it](https://github.com/markdown-it/markdown-it) markdown parser.
+
+With this plugin you can have collapsible admonitions:
+
+- Admonition blocks: Use !!! to create styled info/warning/note blocks
+- Collapsible blocks: Use ??? to create blocks with a toggle, collapsed or expanded
+- ???+ starts the block expanded
+- All admonition and collapsible types from Material for MkDocs are supported
+- Toggle button and styles included
+
+Examples:
+
+```markdown
+!!! note
+  This is an admonition
+
+??? warning "Collapsible Warning"
+  This block can be expanded/collapsed
+
+???+ info "Expanded Info"
+  This block starts expanded
+```
+
+Markdown syntax is inspired by [Material for MkDocs](https://squidfunk.github.io/mkdocs-material/reference/admonitions/) and supports both admonition blocks (!!!) and collapsible blocks (???).
+
+[rST][] suggests the following "types": `attention`, `caution`, `danger`, `error`, `hint`, `important`, `note`, `tip`, and `warning`; however, you’re free to use whatever you want.
+
+A styles file does support the following admonition types: Credits go to [vscode-markdown-extended][].
+
+```
+'note',
+'summary', 'abstract', 'tldr',
+'info', 'todo',
+'tip', 'hint',
+'success', 'check', 'done',
+'question', 'help', 'faq',
+'warning', 'attention', 'caution',
+'failure', 'fail', 'missing',
+'danger', 'error', 'bug',
+'example', 'snippet',
+'quote', 'cite'
+```
+
+![](./docs/admonition-types.png)
+
+## Installation
+
+node.js:
+
+```bash
+$ npm install markdown-it-admon-collapsible --save
+```
+
+
+## API
+
+```js
+const md = require('markdown-it')()
+             .use(require('markdown-it-admon-collapsible') [, options]);
+```
+
+Params:
+
+- __name__ - container name (mandatory)
+- __options?:__
+  - __render__ - optional, renderer function for opening/closing tokens.
+
+## License
+
+[MIT](./LICENSE)
+
+## References
+
+* [Material for MkDocs](https://squidfunk.github.io/mkdocs-material/reference/admonitions/)
+* [vscode-markdown-extended][vscode-markdown-extended]
+* [rST]: https://docutils.sourceforge.io/docs/ref/rst/directives.html#specific-admonitions
+* [vscode-markdown-extended]: https://github.com/qjebbs/vscode-markdown-extended

package/index.js

@@ -0,0 +1,232 @@
+/*
+const ADMONITION_TAGS = [
+  'note',
+  'summary', 'abstract', 'tldr',
+  'info', 'todo',
+  'tip', 'hint',
+  'success', 'check', 'done',
+  'question', 'help', 'faq',
+  'warning', 'attention', 'caution',
+  'failure', 'fail', 'missing',
+  'danger', 'error', 'bug',
+  'example', 'snippet',
+  'quote', 'cite'
+]
+*/
+
+const capitalize = ([first, ...rest], lowerRest = false) =>
+  first.toUpperCase() + rest.join('')
+
+function getTag (params) {
+  const [tag = '', ..._title] = params.trim().split(' ')
+
+  /* c8 ignore next 3 */
+  if (!tag) {
+    return {}
+  }
+
+  const joined = _title.join(' ');
+  let title;
+  if (!joined) {
+    title = capitalize(tag);
+  } else if (joined === '""') {
+    title = '';
+  } else if ((joined.startsWith('"') && joined.endsWith('"')) || (joined.startsWith("'") && joined.endsWith("'"))) {
+    title = joined.slice(1, -1);
+  } else {
+    title = joined;
+  }
+  return { tag: tag.toLowerCase(), title };
+}
+
+function validate (params) {
+  const [tag = ''] = params.trim().split(' ', 1)
+  return !!tag
+}
+
+
+function renderDefault(tokens, idx, _options, env, slf) {
+  return slf.renderToken(tokens, idx, _options, env, slf);
+}
+
+function renderCollapsibleOpen(tokens, idx) {
+  const token = tokens[idx];
+  const classes = token.attrs ? token.attrs.find(a => a[0] === 'class')[1] : '';
+  return `<div class="${classes}">\n`;
+}
+
+function renderCollapsibleTitleOpen(tokens, idx) {
+  const expanded = tokens[idx - 1]?.meta?.expanded;
+  // Add toggle button
+  return `<p class="admonition-title"><button class="collapsible-toggle" tabindex="0">${expanded ? '&#x2212;' : '&#x2b;'}</button>`;
+}
+
+function renderCollapsibleTitleClose() {
+  return '</p>\n';
+}
+
+function renderCollapsibleContentOpen(tokens, idx) {
+  return '<div class="collapsible-content">\n';
+}
+
+function renderCollapsibleContentClose() {
+  return '</div>\n';
+}
+
+
+const minMarkers = 3;
+const markerTypes = [
+  { str: '!', type: 'admonition' },
+  { str: '?', type: 'collapsible' }
+];
+
+
+function admonition(state, startLine, endLine, silent) {
+  let pos, nextLine, token;
+  const start = state.bMarks[startLine] + state.tShift[startLine];
+  let max = state.eMarks[startLine];
+
+  // Determine marker type
+  let markerType = null;
+  for (const type of markerTypes) {
+    if (state.src.substr(start, type.str.length) === type.str.repeat(type.str.length)) {
+      markerType = type;
+      break;
+    }
+  }
+  if (!markerType) return false;
+
+  const markerStr = markerType.str;
+  const markerLen = markerStr.length;
+
+  // Check out the rest of the marker string
+  for (pos = start + 1; pos <= max; pos++) {
+    if (markerStr[(pos - start) % markerLen] !== state.src[pos]) {
+      break;
+    }
+  }
+
+  const markerCount = Math.floor((pos - start) / markerLen);
+  if (markerCount < minMarkers) return false;
+  const markerPos = pos - ((pos - start) % markerLen);
+  let params = state.src.slice(markerPos, max);
+  let markup = state.src.slice(start, markerPos);
+
+  // Collapsible: check for plus sign
+  let isCollapsible = markerType.type === 'collapsible';
+  let expanded = false;
+  if (isCollapsible && params.trim().startsWith('+')) {
+    expanded = true;
+    params = params.trim().slice(1).trim();
+    markup += '+';
+  }
+
+  if (!validate(params)) return false;
+  if (silent) return true;
+
+  const oldParent = state.parentType;
+  const oldLineMax = state.lineMax;
+  const oldIndent = state.blkIndent;
+
+  let blkStart = pos;
+  for (; blkStart < max; blkStart += 1) {
+    if (state.src[blkStart] !== ' ') break;
+  }
+  state.parentType = 'admonition';
+  state.blkIndent += blkStart - start;
+
+  let wasEmpty = false;
+  nextLine = startLine;
+  for (;;) {
+    nextLine++;
+    if (nextLine >= endLine) break;
+    pos = state.bMarks[nextLine] + state.tShift[nextLine];
+    max = state.eMarks[nextLine];
+    const isEmpty = state.sCount[nextLine] < state.blkIndent;
+    if (isEmpty && wasEmpty) break;
+    wasEmpty = isEmpty;
+    if (pos < max && state.sCount[nextLine] < state.blkIndent) break;
+  }
+  state.lineMax = nextLine;
+
+  const { tag, title } = getTag(params);
+
+  // Use different token for collapsible
+  const openType = isCollapsible ? 'collapsible_open' : 'admonition_open';
+  const closeType = isCollapsible ? 'collapsible_close' : 'admonition_close';
+
+  token = state.push(openType, 'div', 1);
+  token.markup = markup;
+  token.block = true;
+  token.attrs = [['class', `admonition ${tag}${isCollapsible ? ' collapsible' : ''}${expanded ? ' expanded' : ''}`]];
+  token.meta = { tag, expanded };
+  token.content = title;
+  token.info = params;
+  token.map = [startLine, nextLine];
+
+  if (title) {
+    const titleMarkup = markup + ' ' + tag;
+    token = state.push(isCollapsible ? 'collapsible_title_open' : 'admonition_title_open', 'p', 1);
+    token.markup = titleMarkup;
+    token.attrs = [['class', 'admonition-title']];
+    token.map = [startLine, startLine + 1];
+
+    token = state.push('inline', '', 0);
+    token.content = title;
+    token.map = [startLine, startLine + 1];
+    token.children = [];
+
+    token = state.push(isCollapsible ? 'collapsible_title_close' : 'admonition_title_close', 'p', -1);
+    token.markup = titleMarkup;
+  }
+
+  state.md.block.tokenize(state, startLine + 1, nextLine);
+
+  token = state.push(closeType, 'div', -1);
+  token.markup = state.src.slice(start, pos);
+  token.block = true;
+
+  state.parentType = oldParent;
+  state.lineMax = oldLineMax;
+  state.blkIndent = oldIndent;
+  state.line = nextLine;
+
+  return true;
+}
+
+module.exports = function admonitionPlugin(md, options = {}) {
+  const render = options.render || renderDefault;
+
+  md.renderer.rules.admonition_open = render;
+  md.renderer.rules.admonition_close = render;
+  md.renderer.rules.admonition_title_open = render;
+  md.renderer.rules.admonition_title_close = render;
+
+  // Collapsible rendering
+  md.renderer.rules.collapsible_open = renderCollapsibleOpen;
+  md.renderer.rules.collapsible_close = (tokens, idx) => '</div>';
+    md.renderer.rules.collapsible_close = (tokens, idx) => '</div>\n';
+  md.renderer.rules.collapsible_title_open = renderCollapsibleTitleOpen;
+  md.renderer.rules.collapsible_title_close = renderCollapsibleTitleClose;
+
+  // Wrap content in collapsible-content div
+  const origBlockTokenize = md.block.tokenize;
+  md.block.tokenize = function(state, startLine, endLine) {
+    if (state.parentType === 'admonition' && state.tokens.length > 0) {
+      const lastToken = state.tokens[state.tokens.length - 1];
+      if (lastToken.type === 'collapsible_title_close') {
+        state.tokens.push({ type: 'collapsible_content_open' });
+        origBlockTokenize.call(this, state, startLine, endLine);
+        state.tokens.push({ type: 'collapsible_content_close' });
+        return;
+      }
+    }
+    origBlockTokenize.call(this, state, startLine, endLine);
+  };
+  md.renderer.rules.collapsible_content_open = renderCollapsibleContentOpen;
+  md.renderer.rules.collapsible_content_close = renderCollapsibleContentClose;
+
+  md.block.ruler.before('fence', 'admonition', admonition, {
+    alt: ['paragraph', 'reference', 'blockquote', 'list']
+  });
+}

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "markdown-it-admon-collapsible",
+  "version": "1.9.1",
+  "description": "Plugin to create admonitions for markdown-it markdown parser",
+  "keywords": [
+    "admonition",
+    "markdown-it-plugin",
+    "markdown-it",
+    "markdown"
+  ],
+  "homepage": "https://github.com/tomasdahlqvist/markdown-it-admon-collapsible#readme",
+  "bugs": {
+    "url": "https://github.com/tomasdahlqvist/markdown-it-admon-collapsible/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tomasdahlqvist/markdown-it-admon-collapsible.git"
+  },
+  "license": "MIT",
+  "author": "",
+  "maintainers": [
+    "tomasdahlqvist"
+  ],
+  "main": "index.js",
+  "directories": {
+    "doc": "docs",
+    "example": "example",
+    "test": "test"
+  },
+  "files": [
+    "CHANGELOG.md",
+    "docs/",
+    "dist/",
+    "index.js",
+    "styles/"
+  ],
+  "scripts": {
+    "clean": "git clean -fXd -e \\!node_modules -e \\!node_modules/**/*",
+    "coverage": "npm run test && c8 report --reporter html",
+    "lint": "eslint --fix .",
+    "test": "c8 mocha",
+    "build": "mkdir -p dist && node_modules/.bin/browserify ./ -s markdownitAdmonCollapsible > dist/markdown-it-admon-collapsible.js && terser dist/markdown-it-admon-collapsible.js -c -m > dist/markdown-it-admon-collapsible.min.js"
+  },
+  "devDependencies": {
+    "browserify": "^17.0.0",
+    "c8": "^10.1.3",
+    "eslint": "^8.56.0",
+    "eslint-config-standard": "^17.1.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^6.1.1",
+    "markdown-it": "^14.0.0",
+    "markdown-it-testgen": "~0.1.6",
+    "mocha": "^11.7.5",
+    "rimraf": "^6.1.2",
+    "terser": "^5.26.0"
+  }
+}

package/styles/admonition.css

@@ -0,0 +1,265 @@
+/* Collapsible block styles */
+.collapsible {
+  border-left-color: #888;
+  position: relative;
+}
+.collapsible .admonition-title {
+  cursor: pointer;
+  user-select: none;
+  padding-right: 2.5rem;
+}
+.collapsible .admonition-title {
+  position: relative;
+}
+.collapsible .collapsible-toggle {
+  position: absolute;
+  right: 1.2rem;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 1.2rem;
+  background: none;
+  border: none;
+  cursor: pointer;
+  outline: none;
+  margin: 0;
+  padding: 0;
+  line-height: 1;
+}
+.collapsible.expanded {
+  /* Optionally highlight expanded state */
+}
+.collapsible-content {
+  display: none;
+}
+.collapsible.expanded .collapsible-content {
+  display: block;
+}
+/**
+ * @credits https://github.com/qjebbs/vscode-markdown-extended
+ * @copyright 2018 jebbs
+ * @license MIT
+ */
+
+@font-face {
+  font-family: "Material Icons";
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/materialicons/v92/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
+}
+
+.admonition {
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12), 0 3px 1px -2px rgba(0, 0, 0, .2);
+  position: relative;
+  margin: 1.5625em 0;
+  padding: 0 1.2rem;
+  border-left: .4rem solid rgba(68, 138, 255, .8);
+  border-radius: .2rem;
+  background-color: rgba(255, 255, 255, 0.05);
+  overflow: auto;
+}
+
+.admonition>p {
+  margin-top: .8rem;
+}
+
+.admonition>.admonition-title {
+  margin: 0 -1.2rem;
+  padding: .8rem 1.0rem .8rem 1.0rem;
+  border-bottom: 1px solid rgba(68, 138, 255, .2);
+  background-color: rgba(68, 138, 255, .1);
+  font-weight: 700;
+}
+
+.admonition>.admonition-title:before {
+  position: absolute;
+  left: 1.0rem;
+  font-size: 1.5rem;
+  /* color: rgba(68, 138, 255, .8); */
+  /* content: "\f05b"; */
+}
+
+.admonition>.admonition-title:before {
+  font-family: Material Icons;
+  font-style: normal;
+  font-variant: normal;
+  font-weight: 400;
+  line-height: 1.2rem;
+  text-transform: none;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+}
+
+.admonition.note>.admonition-title {
+  padding-left: 3.3rem;
+}
+
+.admonition.note>.admonition-title:before {
+  color: rgba(68, 138, 255, .8);
+  content: "\f05b";
+}
+
+.admonition.summary, .admonition.abstract, .admonition.tldr {
+  border-left-color: rgba(0, 176, 255, .8);
+}
+
+.admonition.summary>.admonition-title, .admonition.abstract>.admonition-title, .admonition.tldr>.admonition-title {
+  background-color: rgba(0, 176, 255, .1);
+  border-bottom-color: rgba(0, 176, 255, .2);
+  padding-left: 3.3rem;
+}
+
+.admonition.summary>.admonition-title:before, .admonition.abstract>.admonition-title:before, .admonition.tldr>.admonition-title:before {
+  color: rgba(0, 176, 255, 1);
+  content: "\E8D2";
+}
+
+.admonition.hint, .admonition.tip {
+  border-left-color: rgba(0, 191, 165, .8);
+}
+
+.admonition.hint>.admonition-title, .admonition.tip>.admonition-title {
+  background-color: rgba(0, 191, 165, .1);
+  border-bottom-color: rgba(0, 191, 165, .2);
+  padding-left: 3.3rem;
+}
+
+.admonition.hint>.admonition-title:before, .admonition.tip>.admonition-title:before {
+  color: rgba(0, 191, 165, 1);
+  content: "\E80E";
+}
+
+.admonition.info, .admonition.todo {
+  border-left-color: rgba(0, 184, 212, .8);
+}
+
+.admonition.info>.admonition-title, .admonition.todo>.admonition-title {
+  background-color: rgba(0, 184, 212, .1);
+  border-bottom-color: rgba(0, 184, 212, .2);
+  padding-left: 3.3rem;
+}
+
+.admonition.info>.admonition-title:before, .admonition.todo>.admonition-title:before {
+  color: rgba(0, 184, 212, 1);
+  content: "\E88E";
+}
+
+.admonition.success, .admonition.check, .admonition.done {
+  border-left-color: rgba(0, 200, 83, .8);
+}
+
+.admonition.success>.admonition-title, .admonition.check>.admonition-title, .admonition.done>.admonition-title {
+  background-color: rgba(0, 200, 83, .1);
+  border-bottom-color: rgba(0, 200, 83, .2);
+  padding-left: 3.3rem;
+}
+
+.admonition.success>.admonition-title:before, .admonition.check>.admonition-title:before, .admonition.done>.admonition-title:before {
+  color: rgba(0, 200, 83, 1);
+  content: "\E876";
+}
+
+.admonition.question, .admonition.help, .admonition.faq {
+  border-left-color: rgba(100, 221, 23, .8);
+}
+
+.admonition.question>.admonition-title, .admonition.help>.admonition-title, .admonition.faq>.admonition-title {
+  background-color: rgba(100, 221, 23, .1);
+  border-bottom-color: rgba(100, 221, 23, .2);
+  padding-left: 3.3rem;
+}
+
+.admonition.question>.admonition-title:before, .admonition.help>.admonition-title:before, .admonition.faq>.admonition-title:before {
+  color: rgba(100, 221, 23, 1);
+  content: "\E887";
+}
+
+.admonition.warning, .admonition.attention, .admonition.caution {
+  border-left-color: rgba(255, 145, 0, .8);
+}
+
+.admonition.warning>.admonition-title, .admonition.attention>.admonition-title, .admonition.caution>.admonition-title {
+  background-color: rgba(255, 145, 0, .1);
+  border-bottom-color: rgba(255, 145, 0, .2);
+  padding-left: 3.3rem;
+}
+
+.admonition.attention>.admonition-title:before {
+  color: rgba(255, 145, 0, 1);
+  content: "\E417";
+}
+
+.admonition.warning>.admonition-title:before, .admonition.caution>.admonition-title:before {
+  color: rgba(255, 145, 0, 1);
+  content: "\E002";
+}
+
+.admonition.failure, .admonition.fail, .admonition.missing {
+  border-left-color: rgba(255, 82, 82, .8);
+}
+
+.admonition.failure>.admonition-title, .admonition.fail>.admonition-title, .admonition.missing>.admonition-title {
+  background-color: rgba(255, 82, 82, .1);
+  border-bottom-color: rgba(255, 82, 82, .2);
+  padding-left: 3.3rem;
+}
+
+.admonition.failure>.admonition-title:before, .admonition.fail>.admonition-title:before, .admonition.missing>.admonition-title:before {
+  color: rgba(255, 82, 82, 1);
+  content: "\E14C";
+}
+
+.admonition.danger, .admonition.error, .admonition.bug {
+  border-left-color: rgba(255, 23, 68, .8);
+}
+
+.admonition.danger>.admonition-title, .admonition.error>.admonition-title, .admonition.bug>.admonition-title {
+  background-color: rgba(255, 23, 68, .1);
+  border-bottom-color: rgba(255, 23, 68, .2);
+  padding-left: 3.3rem;
+}
+
+.admonition.danger>.admonition-title:before {
+  color: rgba(255, 23, 68, 1);
+  content: "\E3E7";
+}
+
+.admonition.error>.admonition-title:before {
+  color: rgba(255, 23, 68, 1);
+  content: "\e000";
+}
+
+.admonition.bug>.admonition-title:before {
+  color: rgba(255, 23, 68, 1);
+  content: "\E868";
+}
+
+.admonition.example, .admonition.snippet {
+  border-left-color: rgba(0, 184, 212, .8);
+}
+
+.admonition.example>.admonition-title, .admonition.snippet>.admonition-title {
+  background-color: rgba(0, 184, 212, .1);
+  border-bottom-color: rgba(0, 184, 212, .2);
+  padding-left: 3.3rem;
+}
+
+.admonition.example>.admonition-title:before, .admonition.snippet>.admonition-title:before {
+  color: rgba(0, 184, 212, 1);
+  content: "\e86f";
+}
+
+.admonition.quote, .admonition.cite {
+  border-left-color: rgba(158, 158, 158, .8);
+}
+
+.admonition.quote>.admonition-title, .admonition.cite>.admonition-title {
+  background-color: rgba(158, 158, 158, .1);
+  border-bottom-color: rgba(158, 158, 158, .2);
+  padding-left: 3.3rem;
+}
+
+.admonition.quote>.admonition-title:before, .admonition.cite>.admonition-title:before {
+  color: rgba(158, 158, 158, 1);
+  content: "\E244";
+}