fix(theme): support format pre code when children is array (web-infra…

…-dev#757)
ambar · Mar 12, 2024 · 52dc2e5 · 52dc2e5
1 parent 0bf85b6
commit 52dc2e5
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 10 deletions.
diff --git a/.changeset/popular-masks-bow.md b/.changeset/popular-masks-bow.md
@@ -0,0 +1,5 @@
+---
+'@rspress/theme-default': patch
+---
+
+fix: support format pre code when children is array
diff --git a/packages/theme-default/src/layout/DocLayout/docComponents/pre.tsx b/packages/theme-default/src/layout/DocLayout/docComponents/pre.tsx
@@ -21,16 +21,20 @@ export function Pre({
 }: {
   children: React.ReactElement[] | React.ReactElement;
 }) {
+  const renderChildren = (children: React.ReactElement) => {
+    const { className, meta } = children.props as CodeProps;
+    const codeTitle = parseTitleFromMeta(meta);
+    return (
+      <div className={className || DEFAULT_LANGUAGE_CLASS}>
+        {codeTitle && <div className="rspress-code-title">{codeTitle}</div>}
+        <div className="rspress-code-content rspress-scrollbar">{children}</div>
+      </div>
+    );
+  };
+
   if (Array.isArray(children)) {
-    return <pre>{children}</pre>;
+    return <div>{children.map(child => renderChildren(child))}</div>;
+  } else {
+    return renderChildren(children);
   }
-
-  const { className, meta } = children.props as CodeProps;
-  const codeTitle = parseTitleFromMeta(meta);
-  return (
-    <div className={className || DEFAULT_LANGUAGE_CLASS}>
-      {codeTitle && <div className="rspress-code-title">{codeTitle}</div>}
-      <div className="rspress-code-content rspress-scrollbar">{children}</div>
-    </div>
-  );
 }