diff --git a/app/appearance/themes/daylight/theme.css b/app/appearance/themes/daylight/theme.css
index de60dbdd2..7fce22b35 100644
--- a/app/appearance/themes/daylight/theme.css
+++ b/app/appearance/themes/daylight/theme.css
@@ -143,6 +143,7 @@
     --b3-graph-olist-point: #b3005f;
     --b3-graph-listitem-point: #f65b00;
     --b3-graph-bq-point: #8d48e3;
+    --b3-graph-callout-point: var(--b3-theme-success);
     --b3-graph-super-point: #dd79ff;
     --b3-graph-doc-point: #202124;
     --b3-graph-tag-point: #dbf32f;
@@ -183,6 +184,10 @@
     --b3-pdf-background7: #C885DA;
     --b3-pdf-dark: #212224;
 
+    /* callout */
+    --b3-callout-important: var(--b3-protyle-inline-blockref-color);
+    --b3-callout-warning: var(--b3-protyle-inline-mark-background);
+
     /* 表格 */
     --b3-table-even-background: rgba(0, 0, 0, .02);
 
diff --git a/app/src/assets/scss/component/_typography.scss b/app/src/assets/scss/component/_typography.scss
index a3cf8cb32..a28b73e64 100644
--- a/app/src/assets/scss/component/_typography.scss
+++ b/app/src/assets/scss/component/_typography.scss
@@ -151,6 +151,30 @@
       }
     }
 
+    &[data-subtype="WARNING"] {
+      .callout-info {
+        color: var(--b3-callout-warning);
+      }
+    }
+
+    &[data-subtype="TIP"] {
+      .callout-info {
+        color: var(--b3-theme-success);
+      }
+    }
+
+    &[data-subtype="IMPORTANT"] {
+      .callout-info {
+        color: var(--b3-callout-important);
+      }
+    }
+
+    &[data-subtype="CAUTION"] {
+      .callout-info {
+        color: var(--b3-theme-error);
+      }
+    }
+
     &-info {
       display: flex;
       align-items: center;
diff --git a/app/src/editor/getIcon.ts b/app/src/editor/getIcon.ts
index a2dedeff9..15bde498b 100644
--- a/app/src/editor/getIcon.ts
+++ b/app/src/editor/getIcon.ts
@@ -20,6 +20,9 @@ export const getIconByType = (type: string, sub?: string) => {
         case "NodeBlockquote":
             iconName = "iconQuote";
             break;
+        case "NodeCallout":
+            iconName = "iconCallout";
+            break;
         case "NodeList":
             if (sub === "t") {
                 iconName = "iconCheck";
diff --git a/app/src/layout/dock/Graph.ts b/app/src/layout/dock/Graph.ts
index c60c2a72e..460bf02a2 100644
--- a/app/src/layout/dock/Graph.ts
+++ b/app/src/layout/dock/Graph.ts
@@ -543,6 +543,9 @@ export class Graph extends Model {
                 case "NodeBlockquote":
                     item.color = {background: rootStyle.getPropertyValue("--b3-graph-bq-point").trim()};
                     break;
+                case "NodeCallout":
+                    item.color = {background: rootStyle.getPropertyValue("--b3-graph-callout-point").trim()};
+                    break;
                 case "NodeSuperBlock":
                     item.color = {background: rootStyle.getPropertyValue("--b3-graph-super-point").trim()};
                     break;