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

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>

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

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);
+    }
+  }
+}

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';