diff --git a/example/src/Example/index.md b/example/src/Example/index.md
index 8ac1158..1aa447a 100644
--- a/example/src/Example/index.md
+++ b/example/src/Example/index.md
@@ -11,3 +11,31 @@ description: This is an doc example
 ## CustomSize
 
 <code src="./demos/CustomSize.tsx" nopadding></code>
+
+### Badge
+
+<Badge>info</Badge>
+
+<Badge type="warning">warning</Badge>
+
+<Badge type="error">error</Badge>
+
+<Badge type="success">success</Badge>
+
+## Markdown Highlighting
+
+:::info {title = 自定义标题}
+这是一条普通信息
+:::
+
+:::success
+这是一条成功信息
+:::
+
+:::warning
+这是一条警告信息
+:::
+
+:::error
+这是一条错误信息
+:::
diff --git a/src/builtins/Container/index.tsx b/src/builtins/Container/index.tsx
index 2c65ebc..306329f 100644
--- a/src/builtins/Container/index.tsx
+++ b/src/builtins/Container/index.tsx
@@ -1,35 +1,21 @@
-import { Alert } from 'antd';
+import { Alert, Typography } from '@lobehub/ui';
 import { type FC, type ReactNode } from 'react';
 
-import { useStyles } from './style';
-
 const Container: FC<{
   children: ReactNode;
   title?: string;
   type: 'info' | 'warning' | 'success' | 'error';
 }> = ({ type, title, children }) => {
-  const { styles, cx } = useStyles();
-
   return (
-    <div className={styles.container} data-type={type}>
+    <Typography fontSize={14} headerMultiple={0.25} marginMultiple={0}>
       <Alert
-        className={styles.alert}
-        description={
-          <div
-            className={cx(
-              styles.desc,
-              // 为了让 markdown 的样式生效，需要在这里添加一个额外的 class
-              'markdown',
-            )}
-          >
-            {children}
-          </div>
-        }
+        description={children}
         message={title || type.toUpperCase()}
         showIcon
+        style={{ marginBlock: '1em' }}
         type={type}
       />
-    </div>
+    </Typography>
   );
 };
 
diff --git a/src/builtins/Container/style.ts b/src/builtins/Container/style.ts
deleted file mode 100644
index ba2fc48..0000000
--- a/src/builtins/Container/style.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { FullToken, createStyles } from 'antd-style';
-
-const toCamelCase = (string_: string) => {
-  return string_.replace(/( |^)[a-z]/g, (L) => L.toUpperCase());
-};
-export const useStyles = createStyles(({ token, prefixCls, css }) => {
-  // 把首字母大写
-
-  const overwriteAlert = (type: string) => {
-    const tokens = {
-      background: token[`color${toCamelCase(type)}Bg` as unknown as keyof FullToken],
-      text: token[`color${toCamelCase(type)}Text` as unknown as keyof FullToken],
-    };
-
-    return css`
-      .${prefixCls}-alert-${type} {
-        background: ${tokens.background};
-
-        .${prefixCls}-alert-message {
-          font-weight: bold;
-          color: ${tokens.text};
-        }
-
-        .${prefixCls}-alert-description {
-          .markdown {
-            color: ${tokens.text};
-          }
-        }
-      }
-    `;
-  };
-
-  return {
-    alert: css`
-      border: none;
-
-      .${prefixCls}-alert-message {
-        font-weight: bold;
-      }
-    `,
-    container: css`
-      margin: 8px 0;
-
-      ${overwriteAlert('info')}
-
-      ${overwriteAlert('warning')}
-
-      ${overwriteAlert('success')}
-
-      ${overwriteAlert('error')}
-    `,
-    desc: css`
-      p {
-        margin: 0;
-      }
-    `,
-  };
-});
diff --git a/src/builtins/Previewer/style.ts b/src/builtins/Previewer/style.ts
index 00a104c..3e4ab1a 100644
--- a/src/builtins/Previewer/style.ts
+++ b/src/builtins/Previewer/style.ts
@@ -11,11 +11,6 @@ export const useStyles = createStyles(({ css, token, prefixCls }) => {
       }
     `,
     container: css`
-      .dumi-default-table-content {
-        overflow: visible !important;
-        font-size: 14px;
-      }
-
       .dumi-default-previewer {
         position: relative;
 
diff --git a/src/slots/Content/style.ts b/src/slots/Content/style.ts
index d24b754..972f410 100644
--- a/src/slots/Content/style.ts
+++ b/src/slots/Content/style.ts
@@ -22,6 +22,37 @@ export const useStyles = createStyles(({ cx, token, responsive, css }, isPure: b
       &:has([data-page-tabs='true']) {
         padding-top: 8px;
       }
+
+      .dumi-default-table-content {
+        overflow: visible !important;
+        font-size: 14px;
+      }
+
+      .dumi-default-badge {
+        &:not([type]) {
+          color: ${token.colorInfoText};
+          background: ${token.colorInfoBg};
+          border: 1px solid ${token.colorInfoBorder};
+        }
+
+        &[type='warning'] {
+          color: ${token.colorWarningText};
+          background: ${token.colorWarningBg};
+          border: 1px solid ${token.colorWarningBorder};
+        }
+
+        &[type='error'] {
+          color: ${token.colorErrorText};
+          background: ${token.colorErrorBg};
+          border: 1px solid ${token.colorErrorBorder};
+        }
+
+        &[type='success'] {
+          color: ${token.colorSuccessText};
+          background: ${token.colorSuccessBg};
+          border: 1px solid ${token.colorSuccessBorder};
+        }
+      }
     `,
   ),
 }));