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>

demo/content/post/Markdown Syntax/index.md

@@ -47,6 +47,23 @@ The blockquote element represents content that is quoted from another source, op
 
 [^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, November 18, 2015.
 
+### Blockquote with alert
+
+> [!NOTE]  
+> Highlights information that users should take into account, even when skimming.
+
+> [!TIP]
+> Optional information to help a user be more successful.
+
+> [!IMPORTANT]  
+> Crucial information necessary for users to succeed.
+
+> [!WARNING]  
+> Critical content demanding immediate user attention due to potential risks.
+
+> [!CAUTION]
+> Negative potential consequences of an action.
+
 ## Tables
 
 Tables aren't part of the core Markdown spec, but Hugo supports supports them out-of-the-box.