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>

assets/scss/partials/layout/article.scss

@@ -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;

assets/scss/variables.scss

@@ -105,6 +105,17 @@
 
     --heading-border-size: 4px;
 
+    --alert-note-color: #4da3ff;
+    --alert-note-background: rgba(77, 163, 255, 0.08);
+    --alert-tip-color: #3fb950;
+    --alert-tip-background: rgba(63, 185, 80, 0.08);
+    --alert-important-color: #8457d9;
+    --alert-important-background: rgba(130, 80, 223, 0.08);
+    --alert-warning-color: #d29922;
+    --alert-warning-background: rgba(210, 153, 34, 0.1);
+    --alert-caution-color: #f85149;
+    --alert-caution-background: rgba(248, 81, 73, 0.1);
+
     --link-background-color: 189, 195, 199;
     --link-background-opacity: 0.5;
     --link-background-opacity-hover: 0.7;