Update 20250831

package-lock.json

@@ -8,6 +8,7 @@
       "name": "gooneral-wheelchair",
       "version": "0.0.0",
       "dependencies": {
+        "@digitalocean/do-markdownit": "^1.16.1",
         "dompurify": "^3.2.6",
         "markdown-it": "^14.1.0",
         "markdown-it-abbr": "^2.0.0",
@@ -331,6 +332,23 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@digitalocean/do-markdownit": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/@digitalocean/do-markdownit/-/do-markdownit-1.16.1.tgz",
+      "integrity": "sha512-LkBwW5/oeiXRED/cXFa7lI/lFAic32SfoXmx6oO/St9Uklzu4viwZ3wW6scWKeE+13zAJsFOEMvI2y8rvr/p9w==",
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.1.0",
+        "htmlparser2": "^9.1.0",
+        "prismjs": "^1.29.0"
+      },
+      "peerDependencies": {
+        "markdown-it": ">=12.0.0"
+      }
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.25.9",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.9.tgz",
@@ -1668,6 +1686,47 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
     "node_modules/dompurify": {
       "version": "3.2.6",
       "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.6.tgz",
@@ -1677,6 +1736,20 @@
         "@types/trusted-types": "^2.0.7"
       }
     },
+    "node_modules/domutils": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
+      "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.211",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.211.tgz",
@@ -2090,6 +2163,25 @@
         "node": ">=8"
       }
     },
+    "node_modules/htmlparser2": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-9.1.0.tgz",
+      "integrity": "sha512-5zfg6mHUoaer/97TxnGpxmbR7zJtPwIYFMZ/H5ucTlPZhKvtum05yiPK3Mgai3a0DyVxv7qYqoweaEd2nrYQzQ==",
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.1.0",
+        "entities": "^4.5.0"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -2574,6 +2666,15 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prismjs": {
+      "version": "1.30.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz",
+      "integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",

package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@digitalocean/do-markdownit": "^1.16.1",
     "dompurify": "^3.2.6",
     "markdown-it": "^14.1.0",
     "markdown-it-abbr": "^2.0.0",

public/posts/TEST.md

@@ -242,6 +242,6 @@ It converts "HTML", but keep intact partial entries like "xxxHTMLyyy" and so on.
 
 ### [Custom containers](https://github.com/markdown-it/markdown-it-container)
 
-::: warning
+::: info
 *here be dragons*
 :::

src/App.jsx

@@ -1,6 +1,15 @@
 import React, { useState, useEffect } from 'react';
 import MarkdownIt from 'markdown-it';
 import { full as emoji } from 'markdown-it-emoji';
+import container from "markdown-it-container";
+import abbr from "markdown-it-abbr";
+import deflist from "markdown-it-deflist";
+import footnote from "markdown-it-footnote";
+import mark from "markdown-it-mark";
+import sub from "markdown-it-sub";
+import sup from "markdown-it-sup";
+import ins from "markdown-it-ins";
+import doMarkdownit from "@digitalocean/do-markdownit";
 import DOMPurify from 'dompurify';
 
 const scrollableTablesPlugin = (md) => {
@@ -28,7 +37,17 @@ const md = new MarkdownIt({
   typographer: true,
 });
 md.use(scrollableTablesPlugin)
-  .use(emoji);
+  .use(emoji)
+  .use(abbr)
+  .use(sub)
+  .use(sup)
+  .use(ins)
+  .use(mark)
+  .use(deflist)
+  .use(footnote)
+  //.use(doMarkdownit)
+  .use(container, "info")
+  .use(container, "warning");
 
 function App() {
   const [postFileNames, setPostFileNames] = useState([]);

src/index.css

@@ -245,3 +245,19 @@ body {
 .markdown-content .footnotes li {
   margin: 0.5rem 0;
 }
+
+.markdown-content .info {
+  background-color: #1e3a8a; /* blue-900 */
+  border-left: 4px solid #3b82f6; /* blue-500 */
+  padding: 1rem;
+  border-radius: 0.5rem;
+  margin: 1rem 0;
+}
+
+.markdown-content .warning {
+  background-color: #78350f; /* amber-900 */
+  border-left: 4px solid #f59e0b; /* amber-500 */
+  padding: 1rem;
+  border-radius: 0.5rem;
+  margin: 1rem 0;
+}