fix: codeWrap code element instead (#1671)

web-infra-dev · Dec 16, 2024 · 10e77df · 10e77df
1 parent ed1a3d1
commit 10e77df
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 10 deletions.
diff --git a/e2e/tests/plugin-shiki.test.ts b/e2e/tests/plugin-shiki.test.ts
@@ -32,13 +32,17 @@ test.describe('plugin shiki test', async () => {
     expect(shikiDoms.length).toBe(4);
 
     const firstShikiDom = shikiDoms[0];
+    expect(await firstShikiDom.$eval('pre', node => node.style.overflowX)).toBe(
+      'auto',
+    );
+
     expect(
-      await firstShikiDom.$eval('pre', node => node.style.whiteSpace),
+      await firstShikiDom.$eval('code', node => node.style.whiteSpace),
     ).toBe('pre');
 
     await firstShikiDom.$eval('button', btn => btn.click());
     expect(
-      await firstShikiDom.$eval('pre', node => node.style.whiteSpace),
+      await firstShikiDom.$eval('code', node => node.style.whiteSpace),
     ).toBe('pre-wrap');
   });
 });
diff --git a/packages/theme-default/src/layout/DocLayout/docComponents/code/index.tsx b/packages/theme-default/src/layout/DocLayout/docComponents/code/index.tsx
@@ -52,14 +52,10 @@ export function Code(props: CodeProps) {
       case 'shiki':
       default:
         return (
-          <pre
-            {...props}
-            style={{
-              whiteSpace: codeWrap ? 'pre-wrap' : 'pre',
-              overflowX: 'auto',
-            }}
-          >
-            <code>{props.children}</code>
+          <pre {...props} style={{ overflowX: 'auto' }}>
+            <code style={{ whiteSpace: codeWrap ? 'pre-wrap' : 'pre' }}>
+              {props.children}
+            </code>
           </pre>
         );
     }