feat: support for github alert.

docs/markdown/extended-syntax.md

@@ -55,6 +55,41 @@ Markdown[^1] 可以提高排版效率，并将文本转换为 HTML[^html]
 
 示例展示：来自 GFM[^1] 特性
 
+## 警报
+
+```markdown
+> [!NOTE]
+> 用户应该知道的有用信息，即使在浏览内容时也是如此。
+
+> [!TIP]
+> 有助于更好或更轻松地做事的有用建议。
+
+> [!IMPORTANT]
+> 用户需要了解实现其目标的关键信息。
+
+> [!WARNING]
+> 需要用户立即注意以避免出现问题的紧急信息。
+
+> [!CAUTION]
+> 针对某些行动的风险或负面结果提出建议。
+```
+
+
+> [!NOTE]
+> 用户应该知道的有用信息，即使在浏览内容时也是如此。
+
+> [!TIP]
+> 有助于更好或更轻松地做事的有用建议。
+
+> [!IMPORTANT]
+> 用户需要了解实现其目标的关键信息。
+
+> [!WARNING]
+> 需要用户立即注意以避免出现问题的紧急信息。
+
+> [!CAUTION]
+> 针对某些行动的风险或负面结果提出建议。
+
 ## 示例预览
 
 示例语法扩展，正对需要预览的 HTML 提供了一个 `idoc:preview` 标记，会自动生成 HTML 预览结果到页面，通过按钮点击可以切换 `代码` 和 `预览`，注意下面示例中的 `idoc:preview` 标记：

package.json

@@ -87,6 +87,7 @@
     "rehype-minify-whitespace": "^6.0.0",
     "rehype-parse": "^9.0.0",
     "rehype-slug": "~6.0.0",
+    "remark-github-blockquote-alert": "^1.0.2",
     "yaml": "^2.0.0"
   },
   "devDependencies": {

src/markdown/markdown.ts

@@ -16,6 +16,7 @@ import ignore from 'rehype-ignore';
 import rehypeFormat from 'rehype-format';
 import { getCodeString } from 'rehype-rewrite';
 import slug from 'rehype-slug';
+import { remarkAlert } from 'remark-github-blockquote-alert';
 import { config, MenuData, Config, SiteGlobalConfig } from '../utils/conf.js';
 import rehypeUrls from './rehype-urls.js';
 import { formatChapters, Chapter } from '../utils/chapters.js';
@@ -75,6 +76,7 @@ interface ConfigData extends TemplateData, PageConfig {
 
 export async function createHTML(mdStr: string = '', fromPath: string, toPath: string) {
   const mdOptions: Options = {};
+  mdOptions.remarkPlugins = [remarkAlert];
   mdOptions.rehypePlugins = [
     [
       ignore,

themes/default/css/main.css

@@ -4,6 +4,18 @@
   --color-header-border: #21262d7a;
   --color-hover: #ffffff1c;
   --color-hoc-bg: #fffefe08;
+
+  --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;
 }
 
 [data-color-mode*='light'],
@@ -12,6 +24,18 @@
   --color-header-border: #0000001c;
   --color-hover: #0000001a;
   --color-hoc-bg: #00000008;
+
+  --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;
 }
 
 *,
@@ -256,3 +280,59 @@ section.article-footer .atime {
   color: var(--color-fg-muted);
   font-size: 14px;
 }
+
+.markdown-alert {
+  border-left: 0.25em solid var(--borderColor-default, var(--color-border-default));
+  color: inherit;
+  margin-bottom: 16px;
+  padding: 0.5rem 1em;
+}
+.markdown-alert > :last-child {
+  margin-bottom: 0 !important;
+}
+.markdown-alert .markdown-alert-title {
+  align-items: center;
+  display: flex;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1;
+}
+.markdown-alert .markdown-alert-title svg.octicon {
+  margin-right: 8px !important;
+  margin-right: var(--base-size-8, 8px) !important;
+}
+.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));
+}