diff --git a/e2e/fixtures/theme-css/doc/guide/index.mdx b/e2e/fixtures/theme-css/doc/guide/index.mdx
new file mode 100644
index 0000000000..4388b6e13d
--- /dev/null
+++ b/e2e/fixtures/theme-css/doc/guide/index.mdx
@@ -0,0 +1,59 @@
+# Guide
+
+- list item 1
+- list item 2
+
+<ul>
+  <li>list item 1</li>
+  <li>list item 2</li>
+</ul>
+
+| Header 1 | Header 2 |
+| -------- | -------- |
+| Data 1   | Data 2   |
+| Data 1   | Data 2   |
+
+<table>
+  <thead>
+    <tr>
+      <th>Header 1</th>
+      <th>Header 2</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Data 1</td>
+      <td>Data 2</td>
+    </tr>
+    <tr>
+      <td>Data 1</td>
+      <td>Data 2</td>
+    </tr>
+  </tbody>
+</table>
+
+<div className="rp-not-doc">
+<ul>
+  <li>list item 1</li>
+  <li>list item 2</li>
+</ul>
+
+<table>
+  <thead>
+    <tr>
+      <th>Header 1</th>
+      <th>Header 2</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Data 1</td>
+      <td>Data 2</td>
+    </tr>
+    <tr>
+      <td>Data 1</td>
+      <td>Data 2</td>
+    </tr>
+  </tbody>
+</table>
+</div>
diff --git a/packages/plugin-playground/static/global-components/Playground.tsx b/packages/plugin-playground/static/global-components/Playground.tsx
index a831d18575..44a5cd013b 100644
--- a/packages/plugin-playground/static/global-components/Playground.tsx
+++ b/packages/plugin-playground/static/global-components/Playground.tsx
@@ -82,8 +82,11 @@ export default function Playground(props: PlaygroundProps) {
     'rspress-playground',
     `rspress-playground-${direction}`,
     `rspress-playground-reverse-${useReverseLayout ? 'y' : 'n'}`,
+    'rp-not-doc',
     className,
-  ].join(' ');
+  ]
+    .filter(Boolean)
+    .join(' ');
 
   return (
     <div className={classNames} {...rest}>
diff --git a/packages/plugin-preview/static/global-components/Container.tsx b/packages/plugin-preview/static/global-components/Container.tsx
index 170e26a0cd..f1023ded8a 100644
--- a/packages/plugin-preview/static/global-components/Container.tsx
+++ b/packages/plugin-preview/static/global-components/Container.tsx
@@ -43,7 +43,7 @@ const Container: React.FC<ContainerProps> = props => {
 
   return (
     <NoSSR>
-      <div className="rspress-preview">
+      <div className="rspress-preview rp-not-doc">
         {isMobile === 'true' ? (
           <div className="rspress-preview-wrapper rp-flex">
             <div className="rspress-preview-code">{children?.[0]}</div>
diff --git a/packages/theme-default/src/styles/doc.scss b/packages/theme-default/src/styles/doc.scss
new file mode 100644
index 0000000000..c368298bd8
--- /dev/null
+++ b/packages/theme-default/src/styles/doc.scss
@@ -0,0 +1,103 @@
+/* keep the html syntax in markdown original style e.g: <ul></ul> */
+.rspress-doc {
+  :not(:where(.rp-not-doc *)) {
+    // escape hatch like <div className="rp-not-doc"></div>
+    /* why ":where"? For css priority, <<equal to className priority>>, to be easy to overrides by className */
+    /* list */
+    /* #region */
+    &:where(ul) {
+      list-style: disc;
+      padding-left: 1.25rem;
+      margin-top: 1rem;
+      margin-bottom: 1rem;
+      line-height: 1.75rem;
+    }
+
+    &:where(ol) {
+      list-style: decimal;
+      padding-left: 1.25rem;
+      margin-top: 1rem;
+      margin-bottom: 1rem;
+      line-height: 1.75rem;
+    }
+
+    &:where(ul li):not(:first-child) {
+      margin-top: 0.5rem;
+    }
+
+    &:where(ol li):not(:first-child) {
+      margin-top: 0.5rem;
+    }
+    /* #endregion */
+
+    /* table */
+    /* #region */
+    &:where(table) {
+      display: block;
+      border-collapse: collapse;
+      font-size: 1rem;
+      margin-top: 1.25rem;
+      margin-bottom: 1.25rem;
+      overflow-x: auto;
+      line-height: 1.75rem;
+      border: 1px solid var(--rp-c-border);
+    }
+
+    &:where(table tr) {
+      border: 1px solid;
+      transition-property: color, background-color, border-color;
+      transition-duration: 500ms;
+      border-color: var(--rp-c-gray-light-3);
+    }
+
+    &:where(table tr):nth-child(even) {
+      background-color: var(--rp-c-bg-soft);
+    }
+
+    &:where(table td) {
+      border: 1px solid;
+      padding-left: 1rem;
+      padding-right: 1rem;
+      padding-top: 0.5rem;
+      padding-bottom: 0.5rem;
+      border-color: var(--rp-c-gray-light-3);
+    }
+
+    &:where(table th) {
+      border: 1px solid;
+      padding-left: 1rem;
+      padding-right: 1rem;
+      padding-top: 0.5rem;
+      padding-bottom: 0.5rem;
+      color: var(--rp-c-text-1);
+      font-size: 1rem;
+      font-weight: 600;
+      border-color: var(--rp-c-gray-light-3);
+    }
+  }
+
+  /* #endregion */
+}
+
+/* Dark mode styles */
+:where(.dark) .rspress-doc {
+  :not(:where(.rp-not-doc *)) {
+    /* table */
+    /* #region */
+    &:where(table) {
+      border-color: var(--rp-c-divider);
+    }
+
+    &:where(table tr) {
+      border-color: var(--rp-c-divider);
+    }
+
+    &:where(table td) {
+      border-color: var(--rp-c-divider);
+    }
+
+    &:where(table th) {
+      border-color: var(--rp-c-divider);
+    }
+  }
+}
diff --git a/packages/theme-default/src/styles/index.ts b/packages/theme-default/src/styles/index.ts
index 4e7ab65225..4f1208037f 100644
--- a/packages/theme-default/src/styles/index.ts
+++ b/packages/theme-default/src/styles/index.ts
@@ -4,6 +4,7 @@
 import './vars.css';
 import './base.css';
 import './tailwind.css';
+import './doc.scss';
 import './code.css';
 import './scrollbar.scss';
 import './shiki.scss';