fix: shiki code block cls and lcp

Signed-off-by: Innei <i@innei.in>

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])

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>
  )
 }

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;

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,15 +54,15 @@ 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 || '',
  // code: `${value.split('\n')[0].repeat(10)} // [!code highlight]\n${value}`,
  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)