From d9dfd411246a29966ce197008fd1b96fde9186b4 Mon Sep 17 00:00:00 2001
From: Innei <i@innei.in>
Date: Thu, 18 Apr 2024 12:57:24 +0800
Subject: [PATCH] fix: shiki code block cls and lcp

Signed-off-by: Innei <i@innei.in>
---
 src/components/modules/shared/CodeBlock.tsx   | 23 +++++++++++--------
 .../ui/code-highlighter/index.demo.tsx        | 13 +++++++----
 .../code-highlighter/shiki/Shiki.module.css   |  3 +++
 .../ui/code-highlighter/shiki/Shiki.tsx       |  8 +++----
 4 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/src/components/modules/shared/CodeBlock.tsx b/src/components/modules/shared/CodeBlock.tsx
index faa3ca29be..1c3e81b32d 100644
--- a/src/components/modules/shared/CodeBlock.tsx
+++ b/src/components/modules/shared/CodeBlock.tsx
@@ -78,22 +78,25 @@ export const CodeBlockRender = (props: {
           if (isClientSide) {
             shikiImport = ShikiHighLighter
           }
+
+          const fallback = (
+            <ShikiHighLighterWrapper {...nextProps}>
+              <pre className="bg-transparent px-5">
+                <code className="!px-5 !text-base-content">
+                  {nextProps.content}
+                </code>
+              </pre>
+            </ShikiHighLighterWrapper>
+          )
+          if (!isClientSide) return fallback
           return (
-            <Suspense
-              fallback={
-                <ShikiHighLighterWrapper {...nextProps}>
-                  <pre className="bg-transparent px-5">
-                    <code className="!px-5">{nextProps.content}</code>
-                  </pre>
-                </ShikiHighLighterWrapper>
-              }
-            >
+            <Suspense fallback={fallback}>
               <ShikiHighLighter {...nextProps} />
             </Suspense>
           )
         }
 
-        return <HighLighterPrismCdn {...props} />
+        return <HighLighterPrismCdn {...nextProps} />
       }
     }
   }, [props])
diff --git a/src/components/ui/code-highlighter/index.demo.tsx b/src/components/ui/code-highlighter/index.demo.tsx
index 8d7d011beb..d7f47dc9c0 100644
--- a/src/components/ui/code-highlighter/index.demo.tsx
+++ b/src/components/ui/code-highlighter/index.demo.tsx
@@ -1,11 +1,13 @@
+import { Suspense } from 'react'
 import type { DocumentComponent } from 'storybook/typings'
 
 import { ShikiHighLighter as Shiki } from './shiki/Shiki'
 
 export const ShikiHighLighter: DocumentComponent = () => {
   return (
-    <Shiki
-      content={`import {
+    <Suspense>
+      <Shiki
+        content={`import {
     useCallback,
     useEffect,
     useLayoutEffect,
@@ -194,8 +196,9 @@ export const ShikiHighLighter: DocumentComponent = () => {
     )
   }
   `}
-      lang="tsx"
-      attrs='filename="ShikiHighLighter.tsx" {3,4}'
-    />
+        lang="tsx"
+        attrs='filename="ShikiHighLighter.tsx" {3,4}'
+      />
+    </Suspense>
   )
 }
diff --git a/src/components/ui/code-highlighter/shiki/Shiki.module.css b/src/components/ui/code-highlighter/shiki/Shiki.module.css
index 833cd2f4b2..7a8be1a4c3 100644
--- a/src/components/ui/code-highlighter/shiki/Shiki.module.css
+++ b/src/components/ui/code-highlighter/shiki/Shiki.module.css
@@ -1,5 +1,8 @@
 .code-card {
   @apply relative my-6 overflow-hidden rounded-md;
+
+  font-size: 14px;
+
   :global {
     pre {
       @apply !m-0 !p-0;
diff --git a/src/components/ui/code-highlighter/shiki/Shiki.tsx b/src/components/ui/code-highlighter/shiki/Shiki.tsx
index 360aa7452d..b34c922829 100644
--- a/src/components/ui/code-highlighter/shiki/Shiki.tsx
+++ b/src/components/ui/code-highlighter/shiki/Shiki.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react'
+import { use, useEffect, useMemo, useState } from 'react'
 import type { FC } from 'react'
 
 import { isServerSide } from '~/lib/env'
@@ -12,7 +12,7 @@ interface Props {
   attrs?: string
 }
 
-const codeHighlighter = await (async () => {
+const codeHighlighterPromise = (async () => {
   if (isServerSide) return
   const [{ getHighlighterCore }, getWasm, { codeHighlighter }] =
     await Promise.all([
@@ -54,7 +54,7 @@ const codeHighlighter = await (async () => {
 
 export const ShikiHighLighter: FC<Props> = (props) => {
   const { lang: language, content: value, attrs } = props
-
+  const codeHighlighter = use(codeHighlighterPromise)
   const highlightedHtml = useMemo(() => {
     return codeHighlighter?.({
       attrs: attrs || '',
@@ -62,7 +62,7 @@ export const ShikiHighLighter: FC<Props> = (props) => {
       code: value,
       lang: language ? language.toLowerCase() : '',
     })
-  }, [attrs, language, value])
+  }, [attrs, codeHighlighter, language, value])
 
   const [renderedHtml, setRenderedHtml] = useState(highlightedHtml)
   const [codeBlockRef, setCodeBlockRef] = useState<HTMLDivElement | null>(null)