Upgrade deps

example/alert.md

@@ -0,0 +1,14 @@
+> [!NOTE]
+> Highlights information that users should take into account, even when skimming.
+
+> [!TIP]
+> Optional information to help a user be more successful.
+
+> [!IMPORTANT]
+> Crucial information necessary for users to succeed.
+
+> [!WARNING]
+> Critical content demanding immediate user attention due to potential risks.
+
+> [!CAUTION]
+> Negative potential consequences of an action.

index.js

@@ -28,7 +28,100 @@ const md = markdownit({
   .use(markdownItSub)
   .use(markdownItTaskList)
   .use(alert, {
-    deep: true,
+    deep: false,
+
+    openRender(tokens, index, options, environment, self) {
+      const token = tokens[index];
+
+      let color = null;
+
+      // Case token.markup in ['important', 'note', 'tip', 'warning', 'caution']
+      switch (token?.markup) {
+        case 'important': {
+          color = 'red';
+
+          break;
+        }
+        case 'note': {
+          color = 'blue';
+
+          break;
+        }
+        case 'tip': {
+          color = 'green';
+
+          break;
+        }
+        case 'warning': {
+          color = 'yellow';
+
+          break;
+        }
+        case 'caution': {
+          color = 'yellow light';
+
+          break;
+        }
+        default: {
+          color = 'blue';
+        }
+      }
+
+      return `<blockquote class="x-cli-color-${color}">`;
+    },
+
+    closeRender(tokens, index, options, environment, self) {
+      return '</blockquote>';
+    },
+    titleRender: (tokens, index) => {
+      const token = tokens[index];
+
+      // console.log(token)
+
+      let color = null;
+      let icon = null;
+
+      switch (token?.markup) {
+        case 'important': {
+          color = 'red';
+          icon = '•';
+
+          break;
+        }
+        case 'note': {
+          color = 'blue';
+          icon = '•';
+
+          break;
+        }
+        case 'tip': {
+          color = 'green';
+          icon = '•';
+
+          break;
+        }
+        case 'warning': {
+          color = 'yellow';
+          icon = '•';
+
+          break;
+        }
+        case 'caution': {
+          color = 'yellow light';
+          icon = '•';
+
+          break;
+        }
+        default: {
+          color = 'blue';
+          icon = '•';
+        }
+      }
+
+      return `<p><span class="x-cli-color-${color}"> ${
+        token.content[0].toUpperCase() + token.content.slice(1).toLowerCase()
+      }</span></p>\n`;
+    },
   });
 
 md.renderer.rules.footnote_anchor = () => '';

package.json

@@ -12,14 +12,18 @@
     "markdown": "bin/markdown.js",
     "md": "bin/markdown.js"
   },
+  "engines": {
+    "node": ">=16.0.0",
+    "npm": ">=7.0.0"
+  },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 0",
     "fix": "eslint --quiet --fix *.js bin/*.js .eslintrc.cjs --ignore-pattern '!.eslintrc.js'"
   },
   "dependencies": {
     "@mdit/plugin-alert": "^0.10.1",
     "@types/marked": "^6.0.0",
-    "cli-html": "^4.1.0",
+    "cli-html": "^4.2.0",
     "concat-stream": "^2.0.0",
     "markdown-it": "^14.1.0",
     "markdown-it-abbr": "^2.0.0",
@@ -50,10 +54,6 @@
     "eslint-plugin-unicorn": "^53.0.0",
     "eslint-plugin-you-dont-need-lodash-underscore": "^6.14.0"
   },
-  "engines": {
-    "node": ">=16.0.0",
-    "npm": ">=7.0.0"
-  },
   "author": "Grigorii Horos <horosgrisa@gmail.com>",
   "license": "GPL-3.0-or-later",
   "repository": {