fix: 修复代码块内容渲染

huayemao · Jun 21, 2024 · 086a564 · 086a564
1 parent fea7546
commit 086a564
Showing 1 changed file with 8 additions and 4 deletions.
diff --git a/components/Pre.tsx b/components/Pre.tsx
@@ -9,13 +9,17 @@ export const Pre = ({
   ...props
 }: ComponentProps<"pre">): ReactElement => {
   const preRef = useRef<HTMLPreElement | null>(null);
-  const arr = React.Children.toArray(children);
-  const lidEl = arr[0] as ReactElement;
-  const containerEl = arr[1] as ReactElement;
+  const arr = React.Children.toArray(children) as ReactElement[];
+  const lidEl = arr.filter((e) => e.props.className.includes("language-id"));
+  const containerEl = arr.filter((e) =>
+    e.props.className.includes("code-container")
+  );
   return (
     <pre {...props} ref={preRef} className="relative !pt-10 !overflow-x-hidden">
       <div className="absolute top-0 right-0 left-0 flex items-center justify-between w-full px-6 py-2 pr-4 bg-muted-700 text-muted-100">
-        <span className="text-xs lowercase">{lidEl.props.children}</span>
+        <span className="text-xs lowercase">
+          {lidEl ?? (lidEl as ReactElement).props.children}
+        </span>
         <div className="flex items-center space-x-1">
           {
             <CopyToClipboard