New Feature: add markdown callout support

astro.config.ts

@@ -10,6 +10,7 @@ import {
 } from "@shikijs/transformers";
 import { transformerFileName } from "./src/utils/transformers/fileName";
 import { SITE } from "./src/config";
+import { remarkAlert } from 'remark-github-blockquote-alert'
 
 // https://astro.build/config
 export default defineConfig({
@@ -20,7 +21,7 @@ export default defineConfig({
     }),
   ],
   markdown: {
-    remarkPlugins: [remarkToc, [remarkCollapse, { test: "Table of contents" }]],
+    remarkPlugins: [remarkToc, [remarkCollapse, { test: "Table of contents" }], remarkAlert],
     shikiConfig: {
       // For more themes, visit https://shiki.style/themes
       themes: { light: "min-light", dark: "night-owl" },

package.json

@@ -21,6 +21,7 @@
     "dayjs": "^1.11.13",
     "lodash.kebabcase": "^4.1.1",
     "remark-collapse": "^0.1.2",
+    "remark-github-blockquote-alert": "^2.0.0",
     "remark-toc": "^9.0.0",
     "satori": "^0.15.2",
     "sharp": "^0.34.2",

src/data/blog/callouts.md

@@ -0,0 +1,30 @@
+---
+author: Zoey
+pubDatetime: 2025-10-04
+modDatetime: 2025-10-04
+title: Markdown Callout Support
+slug: markdown-callout-support
+featured: false
+draft: false
+tags:
+  - docs
+description:
+  Support Markdown Callouts using remark-github-blockquote-alert
+---
+
+Using <https://github.com/jaywcjlove/remark-github-blockquote-alert>
+
+> [!NOTE]
+> Useful information that users should know, even when skimming content.
+
+> [!TIP]
+> Helpful advice for doing things better or more easily.
+
+> [!IMPORTANT]
+> Key information users need to know to achieve their goal.
+
+> [!WARNING]
+> Urgent info that needs immediate user attention to avoid problems.
+
+> [!CAUTION]
+> Advises about risks or negative outcomes of certain actions.

src/styles/global.css

@@ -67,3 +67,84 @@ html[data-theme="dark"] {
 :target {
   scroll-margin-block: 1rem;
 }
+
+@layer components {
+  .markdown-alert {
+    --color-border-default: #d0d7de;
+    --color-accent-fg: #0969da;
+    --color-accent-emphasis: #0969da;
+    --color-danger-fg: #d1242f;
+    --color-danger-emphasis: #cf222e;
+    --color-attention-fg: #9a6700;
+    --color-attention-emphasis: #9a6700;
+    --color-done-fg: #8250df;
+    --color-done-emphasis: #8250df;
+    --color-success-fg: #1a7f37;
+    --color-success-emphasis: #1f883d;
+  }
+
+  html[data-theme="dark"] .markdown-alert {
+    --color-border-default: #30363d;
+    --color-accent-fg: #58a6ff;
+    --color-accent-emphasis: #1f6feb;
+    --color-danger-fg: #f85149;
+    --color-danger-emphasis: #da3633;
+    --color-attention-fg: #d29922;
+    --color-attention-emphasis: #9e6a03;
+    --color-done-fg: #a371f7;
+    --color-done-emphasis: #8957e5;
+    --color-success-fg: #3fb950;
+    --color-success-emphasis: #238636;
+  }
+
+  .markdown-alert {
+    border-left: 0.25em solid var(--borderColor-default, var(--color-border-default));
+    @apply mt-6 mb-4 px-4 text-inherit;
+  }
+  .markdown-alert p {
+    @apply mt-0 mb-0;
+  }
+  .markdown-alert .markdown-alert-title {
+    line-height: 1.5;
+    @apply flex items-center font-medium py-2;
+  }
+  .markdown-alert .markdown-alert-title svg.octicon {
+    @apply mr-2 fill-current;
+  }
+
+  .markdown-alert.markdown-alert-note {
+    border-left-color: var(--borderColor-accent-emphasis, var(--color-accent-emphasis));
+  }
+  .markdown-alert.markdown-alert-note .markdown-alert-title {
+    color: var(--color-accent-fg);
+    color: var(--fgColor-accent, var(--color-accent-fg));
+  }
+  .markdown-alert.markdown-alert-tip {
+    border-left-color: var(--borderColor-success-emphasis, var(--color-success-emphasis));
+  }
+  .markdown-alert.markdown-alert-tip .markdown-alert-title {
+    color: var(--color-success-fg);
+    color: var(--fgColor-success, var(--color-success-fg));
+  }
+  .markdown-alert.markdown-alert-important {
+    border-left-color: var(--borderColor-done-emphasis, var(--color-done-emphasis));
+  }
+  .markdown-alert.markdown-alert-important .markdown-alert-title {
+    color: var(--color-done-fg);
+    color: var(--fgColor-done, var(--color-done-fg));
+  }
+  .markdown-alert.markdown-alert-warning {
+    border-left-color: var(--borderColor-attention-emphasis, var(--color-attention-emphasis));
+  }
+  .markdown-alert.markdown-alert-warning .markdown-alert-title {
+    color: var(--color-attention-fg);
+    color: var(--fgColor-attention, var(--color-attention-fg));
+  }
+  .markdown-alert.markdown-alert-caution {
+    border-left-color: var(--borderColor-danger-emphasis, var(--color-danger-emphasis));
+  }
+  .markdown-alert.markdown-alert-caution .markdown-alert-title {
+    color: var(--color-danger-fg);
+    color: var(--fgColor-danger, var(--color-danger-fg));
+  }
+}