fix: add code wrapping support for shiki highlighting (#1670)

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

Hide file tree

Showing 2 changed files with 21 additions and 2 deletions.
diff --git a/e2e/tests/plugin-shiki.test.ts b/e2e/tests/plugin-shiki.test.ts
@@ -1,6 +1,5 @@
 import path from 'node:path';
 import { expect, test } from '@playwright/test';
-import fixture from '../fixtures/plugin-rss/fixture.json';
 import {
   getPort,
   killProcess,
@@ -31,5 +30,15 @@ test.describe('plugin shiki test', async () => {
     });
     const shikiDoms = await page.$$('.shiki');
     expect(shikiDoms.length).toBe(4);
+
+    const firstShikiDom = shikiDoms[0];
+    expect(
+      await firstShikiDom.$eval('pre', node => node.style.whiteSpace),
+    ).toBe('pre');
+
+    await firstShikiDom.$eval('button', btn => btn.click());
+    expect(
+      await firstShikiDom.$eval('pre', 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
@@ -51,7 +51,17 @@ export function Code(props: CodeProps) {
         );
       case 'shiki':
       default:
-        return <code {...props}></code>;
+        return (
+          <pre
+            {...props}
+            style={{
+              whiteSpace: codeWrap ? 'pre-wrap' : 'pre',
+              overflowX: 'auto',
+            }}
+          >
+            <code>{props.children}</code>
+          </pre>
+        );
     }
   };