feat(theme/style): keep the <table> html style be consistent with markdown syntax and .rp-not-doc escape hatch

e2e/fixtures/auto-nav-sidebar/doc/guide/index.mdx

@@ -1 +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>

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}>

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">
             <div className="rspress-preview-code">{children?.[0]}</div>

packages/plugin-preview/static/global-components/ContainerFixedPerComp.tsx

@@ -60,7 +60,7 @@ const ContainerFixedPerComp = (props: ContainerProps) => {
         <MobileContainerFixedPerComp {...props} />
       ) : (
         <NoSSR>
-          <div className="rspress-preview">
+          <div className="rspress-preview rp-not-doc">
             <div>
               <div className="rspress-preview-card">
                 <div

packages/theme-default/src/styles/base.css

@@ -122,30 +122,3 @@ p {
     'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   --rp-font-family-mono: Menlo, Monaco, Consolas, 'Courier New', monospace;
 }
-
-/* #region keep the html syntax in markdown original style e.g: <ul></ul> */
-/* why ":where"? For css priority, to be easy to overrides by className */
-.rspress-doc :where(ul) {
-  list-style: disc;
-
-  padding-left: 1.25rem;
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-  line-height: 1.75rem;
-}
-.rspress-doc :where(ol) {
-  list-style: decimal;
-
-  padding-left: 1.25rem;
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-  line-height: 1.75rem;
-}
-
-.rspress-doc :where(ul) :where(li):not(:first-child) {
-  margin-top: 0.5rem;
-}
-.rspress-doc :where(url) :where(li):not(:first-child) {
-  margin-top: 0.5rem;
-}
-/* #endregion */

packages/theme-default/src/styles/doc.scss

@@ -0,0 +1,106 @@
+/* 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 */
+    /* #regison */
+    &: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;
+      border-style: 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;
+      border-style: 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;
+      border-style: 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);
+    }
+  }
+
+  /* #endregison */
+}
+
+/* Dark mode styles */
+:where(.dark) .rspress-doc {
+  :not(:where(.rp-not-doc *)) {
+    /* table */
+    /* #regison */
+    &: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);
+    }
+  }
+}

packages/theme-default/src/styles/index.ts

@@ -3,5 +3,6 @@
  */
 import './vars.css';
 import './base.css';
+import './doc.scss';
 import './code.css';
 import './scrollbar.scss';