From 3b6aafe48fc7967752e0158367cdcff231742885 Mon Sep 17 00:00:00 2001
From: yangxingyuan <39261479+sanyuan0704@users.noreply.github.com>
Date: Thu, 14 Mar 2024 08:25:23 +0800
Subject: [PATCH] fix: shiki plugin space style (#769)

---
 .changeset/khaki-falcons-act.md                             | 6 ++++++
 packages/plugin-shiki/shiki.css                             | 4 ++++
 packages/plugin-shiki/src/shiki/rehypePlugin.ts             | 6 ++++++
 .../src/components/PackageManagerTabs/index.tsx             | 5 ++++-
 .../src/layout/DocLayout/docComponents/code/index.tsx       | 5 ++++-
 5 files changed, 24 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/khaki-falcons-act.md

diff --git a/.changeset/khaki-falcons-act.md b/.changeset/khaki-falcons-act.md
new file mode 100644
index 000000000..48727f255
--- /dev/null
+++ b/.changeset/khaki-falcons-act.md
@@ -0,0 +1,6 @@
+---
+"@rspress/theme-default": patch
+"@rspress/plugin-shiki": patch
+---
+
+fix: plugin-shiki space style
diff --git a/packages/plugin-shiki/shiki.css b/packages/plugin-shiki/shiki.css
index 84a562bb6..f5ec693c6 100644
--- a/packages/plugin-shiki/shiki.css
+++ b/packages/plugin-shiki/shiki.css
@@ -30,6 +30,10 @@
   --shiki-token-link: #f9a76d;
 }
 
+.rspress-doc span.line {
+  padding: 0 1.25rem;
+}
+
 .diff,
 .code-line-highlighted {
   transition: background-color 0.5s;
diff --git a/packages/plugin-shiki/src/shiki/rehypePlugin.ts b/packages/plugin-shiki/src/shiki/rehypePlugin.ts
index 625a4d689..c9e9ea5be 100644
--- a/packages/plugin-shiki/src/shiki/rehypePlugin.ts
+++ b/packages/plugin-shiki/src/shiki/rehypePlugin.ts
@@ -65,6 +65,12 @@ export const rehypePluginShiki: Plugin<[Options], Root> = function ({
             }
           });
 
+        // Strip the final empty span
+        const lastLine = codeLines[codeLines.length - 1];
+        if (lastLine?.children.length === 0) {
+          codeLines.pop();
+        }
+
         // @ts-expect-error
         parent.children.splice(index!, 1, {
           type: 'element',
diff --git a/packages/theme-default/src/components/PackageManagerTabs/index.tsx b/packages/theme-default/src/components/PackageManagerTabs/index.tsx
index 71a0a7cbb..17b5f9e7e 100644
--- a/packages/theme-default/src/components/PackageManagerTabs/index.tsx
+++ b/packages/theme-default/src/components/PackageManagerTabs/index.tsx
@@ -99,7 +99,10 @@ export function PackageManagerTabs({
       {Object.entries(commandInfo).map(([key, value]) => (
         <Tab key={key}>
           <Pre>
-            <Code className="language-js">{value}</Code>
+            {/* For this case, we can specify to highlight the code in runtime instead of compile time */}
+            <Code className="language-js" codeHighlighter="prism">
+              {value}
+            </Code>
           </Pre>
         </Tab>
       ))}
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 03d957586..bd1f7000a 100644
--- a/packages/theme-default/src/layout/DocLayout/docComponents/code/index.tsx
+++ b/packages/theme-default/src/layout/DocLayout/docComponents/code/index.tsx
@@ -10,12 +10,15 @@ import { SvgWrapper } from '#theme/components/SvgWrapper';
 export interface CodeProps {
   children: string;
   className?: string;
+  codeHighlighter?: 'prism' | 'shiki';
   meta?: string;
 }
 
 export function Code(props: CodeProps) {
   const { siteData } = usePageData();
-  const { defaultWrapCode, codeHighlighter } = siteData.markdown;
+  const codeHighlighter =
+    props.codeHighlighter ?? siteData.markdown.codeHighlighter;
+  const { defaultWrapCode } = siteData.markdown;
   const [codeWrap, setCodeWrap] = useState(defaultWrapCode);
   const wrapButtonRef = useRef<HTMLButtonElement>(null);
   const codeBlockRef = useRef<HTMLDivElement>();