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

e2e/fixtures/heading-title/index.test.ts

@@ -20,17 +20,16 @@ test.describe('heading-title test', async () => {
     await page.goto(`http://localhost:${appPort}/guide`, {
       waitUntil: 'networkidle',
     });
-    const h1s = await page.$$('h1');
-    expect(h1s.length).toBe(1);
+    const h1 = page.locator('h1');
 
-    const h1 = h1s[0];
-    const className = await page.evaluate(h1 => h1?.className, h1);
-    expect(className).toContain('rspress-doc-title');
-    const text = await page.evaluate(h1 => h1?.textContent, h1);
-    expect(text).toContain('Heading Title');
-    expect(await page.evaluate(h1 => h1?.id, h1)).toBe('heading-title');
-    expect(await page.evaluate(link => link?.hash, await h1?.$('a'))).toBe(
-      '#heading-title',
-    );
+    // check style font-size
+    const fontSize = await h1.evaluate(node => {
+      return window.getComputedStyle(node).fontSize;
+    });
+    expect(fontSize).toBe('32px');
+
+    // check anchor #heading-title should be in h1
+    const anchor = h1.locator('a.header-anchor');
+    await expect(anchor).toHaveAttribute('href', '#heading-title');
   });
 });

e2e/fixtures/inline-markdown/index.test.ts

@@ -189,7 +189,7 @@ test.describe('Inline markdown test', async () => {
         '-m <number>',
         '<code>&lt;foo&gt;</code>',
         '<code>foo &lt;bar&gt; baz</code>',
-        '<strong class="rp-font-semibold">bold</strong>',
+        '<strong>bold</strong>',
         '<em>emphasis</em>',
         '<del>delete</del>',
         '<code>This is a long string to test regex performance</code>',

e2e/fixtures/theme-css/doc/prose/index.mdx

@@ -0,0 +1,95 @@
+# Prose
+
+## Paragraph
+
+In Rspress, in addition to declaring [nav](https://rspress.rs/api/config/config-theme.html#nav) and [sidebar](https://rspress.rs/api/config/config-theme.html#sidebar) in the configuration file, you can also automatically generate the navigation bar and sidebar by declaring the `_nav.json` and `_meta.json` description files. We recommend the latter because it can make the configuration file more concise and clear, and it includes all the capabilities under `themeConfig`.
+
+<p>some paragraph, some text here</p>
+
+<p className="rp-not-doc">some paragraph, some text here</p>
+
+## Blockquote
+
+> blockquote text [rspress](https://rspress.rs)
+
+<blockquote>
+  <p>
+    <span>blockquote text</span>{' '}
+    <a href="https://rspress.rs" target="_blank">
+      <span>rspress</span>
+    </a>
+  </p>
+</blockquote>
+
+<blockquote className="rp-not-doc">
+  <p>
+    <span>blockquote text</span>{' '}
+    <a href="https://rspress.rs" target="_blank">
+      <span>rspress</span>
+    </a>
+  </p>
+</blockquote>
+
+## List
+
+- list item 1
+- list item 2
+
+<ul>
+  <li>list item 1</li>
+  <li>list item 2</li>
+</ul>
+
+<div className="rp-not-doc">
+  <ul>
+    <li>list item 1</li>
+    <li>list item 2</li>
+  </ul>
+</div>
+
+## Table
+
+| 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">
+  <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/plugin-twoslash/static/global-styles/twoslash.css

@@ -246,7 +246,7 @@
   background-color: var(--twoslash-cursor-color);
 }
 
-.twoslash .twoslash-popup-inner > .rp-list-disc {
+.twoslash .twoslash-popup-inner > ul {
   width: 240px;
   font-size: 0.8rem;
   padding: 6px 8px;
@@ -256,36 +256,28 @@
   gap: 4px;
 }
 
-.twoslash .twoslash-popup-inner > .rp-list-disc:hover {
+.twoslash .twoslash-popup-inner > ul:hover {
   user-select: auto;
 }
 
-.twoslash .twoslash-popup-inner > .rp-list-disc li {
+.twoslash .twoslash-popup-inner > ul li {
   overflow: hidden;
   display: flex;
   align-items: center;
   gap: 0.25em;
   line-height: 1em;
 }
 
-.twoslash
-  .twoslash-popup-inner
-  > .rp-list-disc
-  li
-  span.twoslash-completions-unmatched {
+.twoslash .twoslash-popup-inner > ul li span.twoslash-completions-unmatched {
   color: var(--twoslash-unmatched-color);
 }
 
-.twoslash .twoslash-popup-inner > .rp-list-disc .deprecated {
+.twoslash .twoslash-popup-inner > ul .deprecated {
   text-decoration: line-through;
   opacity: 0.5;
 }
 
-.twoslash
-  .twoslash-popup-inner
-  > .rp-list-disc
-  li
-  span.twoslash-completions-matched {
+.twoslash .twoslash-popup-inner > ul li span.twoslash-completions-matched {
   color: var(--twoslash-matched-color);
 }
 
@@ -299,7 +291,7 @@
 }
 
 /* Icons */
-.twoslash .twoslash-popup-inner > .rp-list-disc .twoslash-completions-icon {
+.twoslash .twoslash-popup-inner > ul .twoslash-completions-icon {
   color: var(--twoslash-unmatched-color);
   width: 1em;
   flex: none;

packages/theme-default/src/components/Link/index.scss

@@ -0,0 +1,3 @@
+.rp-link {
+  cursor: pointer;
+}

packages/theme-default/src/components/Link/index.tsx

@@ -2,8 +2,8 @@ import nprogress from 'nprogress';
 import type React from 'react';
 import type { ComponentProps } from 'react';
 import { preloadLink } from '../Sidebar/utils';
-import * as styles from './index.module.scss';
 import { getHref, useNavigate } from './useNavigate';
+import './index.scss';
 
 export interface LinkProps extends ComponentProps<'a'> {
   href?: string;
@@ -37,7 +37,7 @@ export function Link(props: LinkProps) {
         href={href}
         target="_blank"
         rel="noopener noreferrer"
-        className={`${styles.link} ${className}`}
+        className={`rp-link ${className}`}
       >
         {children}
       </a>
@@ -46,7 +46,7 @@ export function Link(props: LinkProps) {
 
   if (linkType === 'hashOnly') {
     return (
-      <a {...props} href={href} className={`${styles.link} ${className}`}>
+      <a {...props} href={href} className={`rp-link ${className}`}>
         {children}
       </a>
     );
@@ -57,7 +57,7 @@ export function Link(props: LinkProps) {
       <a
         {...props}
         href={href}
-        className={`${styles.link} ${className}`}
+        className={`rp-link ${className}`}
         onMouseEnter={event => {
           onMouseEnter?.(event);
           preloadLink(removeBaseHref);
@@ -90,7 +90,7 @@ export function Link(props: LinkProps) {
     <a
       {...props}
       href={withBaseHref}
-      className={`${styles.link} ${className}`}
+      className={`rp-link ${className}`}
       onMouseEnter={event => {
         onMouseEnter?.(event);
         preloadLink(removeBaseHref);

packages/theme-default/src/layout/DocLayout/docComponents/a.tsx

@@ -1,15 +1,6 @@
 import { Link } from '@theme';
 import type { ComponentProps } from 'react';
-import * as styles from './index.module.scss';
 
 export const A = (props: ComponentProps<'a'>) => {
-  const { href = '', className = '' } = props;
-
-  return (
-    <Link
-      {...props}
-      className={`${className} ${styles.link} ${styles.inlineLink}`}
-      href={href}
-    />
-  );
+  return <Link {...props} />;
 };

packages/theme-default/src/layout/DocLayout/docComponents/hr.tsx

@@ -1,10 +1,5 @@
 import type { ComponentProps } from 'react';
 
 export const Hr = (props: ComponentProps<'hr'>) => {
-  return (
-    <hr
-      {...props}
-      className="rp-my-12 rp-border-t rp-border-solid rp-border-divider-light"
-    />
-  );
+  return <hr {...props} />;
 };