diff --git a/packages/docusaurus-theme-classic/src/theme/MDXComponents/index.tsx b/packages/docusaurus-theme-classic/src/theme/MDXComponents/index.tsx
index 286a86fd50..e121958d4d 100644
--- a/packages/docusaurus-theme-classic/src/theme/MDXComponents/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/MDXComponents/index.tsx
@@ -5,9 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {isValidElement} from 'react';
 import Link from '@docusaurus/Link';
-import CodeBlock from '@theme/CodeBlock';
+import CodeBlock, {Props} from '@theme/CodeBlock';
 import Heading from '@theme/Heading';
 import type {MDXComponentsObject} from '@theme/MDXComponents';
 
@@ -25,7 +25,13 @@ const MDXComponents: MDXComponentsObject = {
   a: (props) => <Link {...props} />,
   pre: (props: any) => {
     const {children} = props;
-    return <CodeBlock {...children?.props} />;
+    return (
+      <CodeBlock
+        {...((isValidElement(children)
+          ? children?.props
+          : {children}) as Props)}
+      />
+    );
   },
   h1: Heading('h1'),
   h2: Heading('h2'),
diff --git a/website/src/pages/examples/markdownPageExample.md b/website/src/pages/examples/markdownPageExample.md
index 78f642ab09..8c92ba3fa0 100644
--- a/website/src/pages/examples/markdownPageExample.md
+++ b/website/src/pages/examples/markdownPageExample.md
@@ -188,4 +188,15 @@ function Clock(props) {
 
 <code>test</code>
 
+## direct using of `pre`
+
+<pre>test</pre>
+
+<!-- Multi-line text inside `pre` will turn into one-liner, but it's okay (https://github.com/mdx-js/mdx/issues/1095) -->
+<pre>
+1
+2
+3
+</pre>
+
 ## Custom heading id {#custom}