feat: add markdown alerts support (#1221)

* Markdown alerts * refactor(alert): move alert color to variable.scss and simplify the style * style: fix indent in render-blockquote * feat(alert): add customizable alert icons for different alert types * doc: add example usage of markdown alert --------- Co-authored-by: Jimmy Cai <jimmy@cai.im>
2026-02-18 19:43:34 +01:00
parent 2058c1ff6d
commit 470295171e
6 changed files with 101 additions and 0 deletions
@@ -329,6 +329,34 @@
        }
    }

+    blockquote.alert {
+        .alert-header {
+            display: flex;
+            align-items: center;
+            gap: 0.5em;
+            font-weight: bold;
+        }
+
+        .alert-body {
+            > :last-child {
+                margin-bottom: 0;
+            }
+        }
+
+        $alert-types: note, tip, important, warning, caution;
+
+        @each $type in $alert-types {
+            &.alert-#{$type} {
+                border-color: var(--alert-#{$type}-color);
+                background-color: var(--alert-#{$type}-background);
+
+                .alert-title {
+                    color: var(--alert-#{$type}-color);
+                }
+            }
+        }
+    }
+
    hr {
        width: 100px;
        margin: 40px auto;