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.

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

@@ -47,6 +47,23 @@ Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sap
 
 [^1]: 以上引用摘自 Rob Pike 在 2015 年 11 月 18 日 Gopherfest 期间的[演讲](https://www.youtube.com/watch?v=PAAkCSZUG1c)。
 
+### 带提示的引用
+
+> [!NOTE]  
+> 突出显示用户在快速浏览时也应注意的信息。
+
+> [!TIP]
+> 可选信息，帮助用户更顺利地完成任务。
+
+> [!IMPORTANT]  
+> 用户成功所必需的关键信息。
+
+> [!WARNING]  
+> 由于潜在风险而需要用户立即关注的关键内容。
+
+> [!CAUTION]
+> 某个操作可能带来的负面后果。
+
 ## 表格 (Tables)
 
 表格虽然不是 Markdown 核心规范的一部分，但 Hugo 出箱即用地支持它们。