GfmMarkdown support gfm alerts

resolved #2

package.json

@@ -27,10 +27,13 @@
     "react": "^18",
     "react-dom": "^18",
     "react-markdown": "^9.0.1",
+    "rehype-github-alerts": "^3.0.0",
     "rehype-raw": "^7.0.0",
     "rehype-sanitize": "^6.0.0",
     "rehype-slug": "^6.0.0",
-    "remark-gfm": "^4.0.0"
+    "remark-directive": "^3.0.0",
+    "remark-gfm": "^4.0.0",
+    "remark-github-admonitions-to-directives": "^2.0.0"
   },
   "devDependencies": {
     "@types/node": "^20",

src/components/markdown/gfm-markdown-alerts.ts

@@ -0,0 +1,30 @@
+import { IAlert } from "rehype-github-alerts";
+
+// https://github.com/orgs/community/discussions/16925
+export const alerts: Array<IAlert> = [
+  {
+    keyword: "NOTE",
+    icon: '<svg class="mr-2" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path></svg>',
+    title: "Note"
+  },
+  {
+    keyword: "IMPORTANT",
+    icon: '<svg class="mr-2" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0 1 14.25 13H8.06l-2.573 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25Zm7 2.25v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path></svg>',
+    title: "Important"
+  },
+  {
+    keyword: "WARNING",
+    icon: '<svg class="mr-2" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path></svg>',
+    title: "Warning"
+  },
+  {
+    keyword: "TIP",
+    icon: '<svg class="mr-2" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z"></path></svg>',
+    title: "Tip"
+  },
+  {
+    keyword: "CAUTION",
+    icon: '<svg class="mr-2" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="M4.47.22A.749.749 0 0 1 5 0h6c.199 0 .389.079.53.22l4.25 4.25c.141.14.22.331.22.53v6a.749.749 0 0 1-.22.53l-4.25 4.25A.749.749 0 0 1 11 16H5a.749.749 0 0 1-.53-.22L.22 11.53A.749.749 0 0 1 0 11V5c0-.199.079-.389.22-.53Zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5ZM8 4a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path></svg>',
+    title: "Caution"
+  }
+]

src/components/markdown/gfm-markdown.tsx

@@ -1,15 +1,18 @@
 import { clsx } from "clsx";
 import Markdown from "react-markdown";
+import { rehypeGithubAlerts } from "rehype-github-alerts";
 import rehypeRaw from "rehype-raw";
 import rehypeSanitize from "rehype-sanitize";
 import rehypeSlug from "rehype-slug";
 import remarkGfm from "remark-gfm";
 import { PluggableList } from "unified";
 import { AnchorIdSanitizeFixer } from "./anchor-id-sanitize-fixer";
+import { alerts } from "./gfm-markdown-alerts";
 import { HighlightJsHookDynamic } from "./highlight-js-hook-dynamic";
 import { MermaidHook } from "./mermaid-hook";
 import { imageHeightFixer, mermaidTransformer } from "./rehype-plugins";
 import "@/styles/github-markdown.css"
+import "@/styles/github-markdown-alert.css"
 
 interface GfmMarkdownProps {
   children: string,
@@ -49,6 +52,7 @@ export default function GfmMarkdown({children, className, allowEmbedHtml, allowA
   if (allowEmbedHtml) {
     rehypePlugins.push(imageHeightFixer)
   }
+  rehypePlugins.push([rehypeGithubAlerts, {alerts: alerts}])
   rehypePlugins.push(mermaidTransformer)
 
   return (

src/styles/github-markdown-alert.css

@@ -0,0 +1,90 @@
+/* https://github.com/chrisweb/rehype-github-alerts?tab=readme-ov-file#styling */
+
+/* fallen's modification: alert icon styles */
+.markdown-alert-title > svg {
+    fill: currentColor;
+}
+
+.markdown-alert {
+    --github-alert-default-color: rgb(208, 215, 222);
+    --github-alert-note-color: rgb(9, 105, 218);
+    --github-alert-tip-color: rgb(26, 127, 55);
+    --github-alert-important-color: rgb(130, 80, 223);
+    --github-alert-warning-color: rgb(191, 135, 0);
+    --github-alert-caution-color: rgb(207, 34, 46);
+}
+
+@media (prefers-color-scheme: dark) {
+    .markdown-alert {
+        --github-alert-default-color: rgb(48, 54, 61);
+        --github-alert-note-color: rgb(31, 111, 235);
+        --github-alert-tip-color: rgb(35, 134, 54);
+        --github-alert-important-color: rgb(137, 87, 229);
+        --github-alert-warning-color: rgb(158, 106, 3);
+        --github-alert-caution-color: rgb(248, 81, 73);
+    }
+}
+
+.markdown-alert {
+    padding: 0.5rem 1rem;
+    margin-bottom: 16px;
+    border-left: 0.25em solid var(--github-alert-default-color);
+}
+
+.markdown-alert>:first-child {
+    margin-top: 0;
+}
+
+.markdown-alert>:last-child {
+    margin-bottom: 0;
+}
+
+.markdown-alert-note {
+    border-left-color: var(--github-alert-note-color);
+}
+
+.markdown-alert-tip {
+    border-left-color: var(--github-alert-tip-color);
+}
+
+.markdown-alert-important {
+    border-left-color: var(--github-alert-important-color);
+}
+
+.markdown-alert-warning {
+    border-left-color: var(--github-alert-warning-color);
+}
+
+.markdown-alert-caution {
+    border-left-color: var(--github-alert-caution-color);
+}
+
+.markdown-alert-title {
+    display: flex;
+    margin-bottom: 4px;
+    align-items: center;
+}
+
+.markdown-alert-title>svg {
+    margin-right: 8px;
+}
+
+.markdown-alert-note .markdown-alert-title {
+    color: var(--github-alert-note-color);
+}
+
+.markdown-alert-tip .markdown-alert-title {
+    color: var(--github-alert-tip-color);
+}
+
+.markdown-alert-important .markdown-alert-title {
+    color: var(--github-alert-important-color);
+}
+
+.markdown-alert-warning .markdown-alert-title {
+    color: var(--github-alert-warning-color);
+}
+
+.markdown-alert-caution .markdown-alert-title {
+    color: var(--github-alert-caution-color);
+}

src/styles/github-markdown.css

@@ -16,6 +16,29 @@
  * 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.
  */
 
+/* fallen's modification: add --base-size variables definitions */
+.markdown-body {
+  --base-size-2: 0.125rem;
+  --base-size-4: 0.25rem;
+  --base-size-6: 0.375rem;
+  --base-size-8: 0.5rem;
+  --base-size-12: 0.75rem;
+  --base-size-16: 1rem;
+  --base-size-20: 1.25rem;
+  --base-size-24: 1.5rem;
+  --base-size-28: 1.75rem;
+  --base-size-32: 2rem;
+  --base-size-36: 2.25rem;
+  --base-size-40: 2.5rem;
+  --base-size-44: 2.75rem;
+  --base-size-48: 3rem;
+  --base-size-64: 4rem;
+  --base-size-80: 5rem;
+  --base-size-96: 6rem;
+  --base-size-112: 7rem;
+  --base-size-128: 8rem;
+}
+
 [data-mantine-color-scheme="dark"] .markdown-body {
   /*dark*/
   color-scheme: dark;