From b6977c33c8d411ad66c16b486ca09a0acd3f52ab Mon Sep 17 00:00:00 2001
From: JounQin <admin@1stg.me>
Date: Tue, 17 Dec 2024 00:04:56 +0800
Subject: [PATCH] fix: add code wrapping support for shiki highlighting

close #1619
---
 e2e/tests/plugin-shiki.test.ts                       | 11 ++++++++++-
 .../layout/DocLayout/docComponents/code/index.tsx    | 12 +++++++++++-
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/e2e/tests/plugin-shiki.test.ts b/e2e/tests/plugin-shiki.test.ts
index 4d7b89f44..29707a039 100644
--- 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
index b9386640c..d6cff1b81 100644
--- 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>
+        );
     }
   };