markdown-it-admon-collapsible 1.9.3 → 1.9.5

package/CHANGELOG.md

@@ -1,13 +1,27 @@
 # Changelog
 
-## 1.9.2
+## 1.9.5
 
-2025-12-26
+2026-01-01
 
-- forked from markdown-it-admon
+- Made validation customizable
+- General cleanup and added markdownlint
+
+## 1.9.4
+
+2025-12-27
+
+- Reverted since the previous change was a misunderstanding
+- Using details/summary for collapsible admonitions
 
 ## 1.9.3
 
 2025-12-27
 
 - Changed the generated HTML to be more like markdown-it-container
+
+## 1.9.2
+
+2025-12-26
+
+- forked from markdown-it-admon

package/README.md

@@ -1,7 +1,6 @@
 # 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:
@@ -31,7 +30,7 @@ Markdown syntax is inspired by [Material for MkDocs](https://squidfunk.github.io
 
 A styles file does support the following admonition types: Credits go to [vscode-markdown-extended][].
 
-```
+```text
 'note',
 'summary', 'abstract', 'tldr',
 'info', 'todo',
@@ -45,17 +44,16 @@ A styles file does support the following admonition types: Credits go to [vscode
 'quote', 'cite'
 ```
 
-![](./docs/admonition-types.png)
+![Admonition types](./docs/admonition-types.png)
 
 ## Installation
 
 node.js:
 
 ```bash
-$ npm install markdown-it-admon-collapsible --save
+npm install markdown-it-admon-collapsible --save
 ```
 
-
 ## API
 
 ```js
@@ -63,11 +61,24 @@ const md = require('markdown-it')()
              .use(require('markdown-it-admon-collapsible') [, options]);
 ```
 
-Params:
+Plugin Options
+
+- `render`: (optional) Custom render function.
+- `validate`: (optional) Custom validation function. If provided, this function will be used to validate the parameters for admonitions.
 
-- __name__ - container name (mandatory)
-- __options?:__
-  - __render__ - optional, renderer function for opening/closing tokens.
+### Example usage
+
+```js
+const md = require('markdown-it')();
+const admonitionPlugin = require('markdown-it-admon-collapsible');
+
+md.use(admonitionPlugin, {
+  validate: function(params) {
+    // Custom validation logic
+    return params.startsWith('note');
+  }
+});
+```
 
 ## License
 
@@ -75,7 +86,7 @@ Params:
 
 ## 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
+- [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

@@ -25,18 +25,18 @@ function getTag (params) {
     return {}
   }
 
-  const joined = _title.join(' ');
-  let title;
+  const joined = _title.join(' ')
+  let title
   if (!joined) {
-    title = capitalize(tag);
+    title = capitalize(tag)
   } else if (joined === '""') {
-    title = '';
+    title = ''
   } else if ((joined.startsWith('"') && joined.endsWith('"')) || (joined.startsWith("'") && joined.endsWith("'"))) {
-    title = joined.slice(1, -1);
+    title = joined.slice(1, -1)
   } else {
-    title = joined;
+    title = joined
   }
-  return { tag: tag.toLowerCase(), title };
+  return { tag: tag.toLowerCase(), title }
 }
 
 function validate (params) {
@@ -44,188 +44,181 @@ function validate (params) {
   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 `<div class="admonition-title"><button class="collapsible-toggle" tabindex="0">${expanded ? '&#x2212;' : '&#x2b;'}</button>`;
-}
-
-function renderCollapsibleTitleClose() {
-  return '</div>\n';
+function renderDefault (tokens, idx, _options, env, slf) {
+  return slf.renderToken(tokens, idx, _options, env, slf)
 }
 
-function renderCollapsibleContentOpen(tokens, idx) {
-  return '';
+function renderCollapsibleContentOpen (tokens, idx) {
+  return ''
 }
 
-function renderCollapsibleContentClose() {
-  return '';
+function renderCollapsibleContentClose () {
+  return ''
 }
 
-
-const minMarkers = 3;
+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];
+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;
+  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;
+      markerType = type
+      break
     }
   }
-  if (!markerType) return false;
+  if (!markerType) return false
 
-  const markerStr = markerType.str;
-  const markerLen = markerStr.length;
+  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;
+      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);
+  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;
+  const isCollapsible = markerType.type === 'collapsible'
+  let expanded = false
   if (isCollapsible && params.trim().startsWith('+')) {
-    expanded = true;
-    params = params.trim().slice(1).trim();
-    markup += '+';
+    expanded = true
+    params = params.trim().slice(1).trim()
+    markup += '+'
   }
 
-  if (!validate(params)) return false;
-  if (silent) return true;
+  const validateFn = state.md.options && state.md.options.admonitionValidate
+    ? state.md.options.admonitionValidate
+    : validate
+  if (!validateFn(params)) return false
+  if (silent) return true
 
-  const oldParent = state.parentType;
-  const oldLineMax = state.lineMax;
-  const oldIndent = state.blkIndent;
+  const oldParent = state.parentType
+  const oldLineMax = state.lineMax
+  const oldIndent = state.blkIndent
 
-  let blkStart = pos;
+  let blkStart = pos
   for (; blkStart < max; blkStart += 1) {
-    if (state.src[blkStart] !== ' ') break;
+    if (state.src[blkStart] !== ' ') break
   }
-  state.parentType = 'admonition';
-  state.blkIndent += blkStart - start;
+  state.parentType = 'admonition'
+  state.blkIndent += blkStart - start
 
-  let wasEmpty = false;
-  nextLine = startLine;
+  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;
+    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;
+  state.lineMax = nextLine
 
-  const { tag, title } = getTag(params);
+  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];
+  const openType = isCollapsible ? 'collapsible_open' : 'admonition_open'
+  const closeType = isCollapsible ? 'collapsible_close' : 'admonition_close'
+
+  token = isCollapsible ? state.push(openType, 'details', 1) : state.push(openType, 'div', 1)
+  token.markup = markup
+  token.block = true
+  token.attrs = [['class', `admonition ${tag}`]]
+  if (expanded) {
+    token.attrs.push(['open', ''])
+  }
+  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', 'div', 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', 'div', -1);
-    token.markup = titleMarkup;
+    const titleMarkup = markup + ' ' + tag
+    token = isCollapsible ? state.push('collapsible_title_open', 'summary', 1) : state.push('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 = isCollapsible ? state.push('collapsible_title_close', 'summary', -1) : state.push('admonition_title_close', 'p', -1)
+    token.markup = titleMarkup
   }
 
-  state.md.block.tokenize(state, startLine + 1, nextLine);
+  state.md.block.tokenize(state, startLine + 1, nextLine)
 
-  token = state.push(closeType, 'div', -1);
-  token.markup = state.src.slice(start, pos);
-  token.block = true;
+  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;
+  state.parentType = oldParent
+  state.lineMax = oldLineMax
+  state.blkIndent = oldIndent
+  state.line = nextLine
 
-  return true;
+  return true
 }
 
-module.exports = function admonitionPlugin(md, options = {}) {
-  const render = options.render || renderDefault;
+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;
+  if (options.validate) {
+    md.options.admonitionValidate = options.validate
+  }
+
+  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>\n';
-  md.renderer.rules.collapsible_title_open = renderCollapsibleTitleOpen;
-  md.renderer.rules.collapsible_title_close = renderCollapsibleTitleClose;
+  // Use default renderer for collapsible_open/close
+  md.renderer.rules.collapsible_close = (tokens, idx) => '</details>\n'
+  // Use default renderer for collapsible_title_open/close
 
   // Wrap content in collapsible-content div
-  const origBlockTokenize = md.block.tokenize;
-  md.block.tokenize = function(state, startLine, endLine) {
+  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];
+      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;
+        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;
+    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']
-  });
+  })
 }
+
+admonitionPlugin.admonition = admonition
+module.exports = admonitionPlugin

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "markdown-it-admon-collapsible",
-  "version": "1.9.3",
+  "version": "1.9.5",
   "description": "Plugin to create admonitions for markdown-it markdown parser",
   "keywords": [
     "admonition",
@@ -37,7 +37,7 @@
   "scripts": {
     "clean": "git clean -fXd -e \\!node_modules -e \\!node_modules/**/*",
     "coverage": "npm run test && c8 report --reporter html",
-    "lint": "eslint --fix .",
+    "lint": "eslint --fix . && markdownlint-cli2 **/*.md",
     "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"
   },
@@ -51,6 +51,9 @@
     "eslint-plugin-promise": "^6.1.1",
     "markdown-it": "^14.0.0",
     "markdown-it-testgen": "~0.1.6",
+    "markdownlint": "^0.40.0",
+    "markdownlint-cli2": "^0.20.0",
+    "markdownlint-rule-numbered-headings-unique": "^1.0.7",
     "mocha": "^11.7.5",
     "rimraf": "^6.1.2",
     "terser": "^5.26.0"

package/styles/admonition.css

@@ -1,40 +1,38 @@
-/* Collapsible block styles */
-.collapsible {
-  border-left-color: #888;
+
+summary.admonition-title {
   position: relative;
 }
-.collapsible .admonition-title {
-  cursor: pointer;
-  user-select: none;
-  padding-right: 2.5rem;
-}
-.collapsible .admonition-title {
-  position: relative;
+summary.admonition-title::marker {
+  content: none;
 }
-.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;
+summary.admonition-title::after {
+  content: '▶';
 }
-.collapsible.expanded {
-  /* Optionally highlight expanded state */
+summary.admonition-title::after {
+    position: absolute;
+    right: 0.5rem;
+  }
+[open] summary.admonition-title::after {
+  transform: rotate(90deg);
+  transform-origin: 50% 50%;
 }
 
-/* Hide all siblings of .admonition-title when not expanded */
-.collapsible:not(.expanded) > .admonition-title ~ * {
-  display: none;
+/* Collapsible block styles using <details> and <summary> */
+details.admonition {
+  border-left-color: #888;
+  position: relative;
 }
-.collapsible.expanded > .admonition-title ~ * {
-  display: block;
+summary.admonition-title {
+  cursor: pointer;
+  user-select: none;
+  position: relative;
+  padding-right: 2.5rem;
+  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;
+  list-style: none;
 }
 /**
  * @credits https://github.com/qjebbs/vscode-markdown-extended