fix: shiki plugin space style

web-infra-dev · Mar 13, 2024 · 5389684 · 5389684
1 parent 915064f
commit 5389684
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 2 deletions.
diff --git a/.changeset/khaki-falcons-act.md 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
@@ -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
@@ -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
@@ -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
@@ -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>();