diff --git a/docs/src/components/home/AdvancedShowcase.tsx b/docs/src/components/home/AdvancedShowcase.tsx
index 8ada3b7c591b62..eebf08351edb55 100644
--- a/docs/src/components/home/AdvancedShowcase.tsx
+++ b/docs/src/components/home/AdvancedShowcase.tsx
@@ -6,7 +6,7 @@ import Typography from '@mui/material/Typography';
 import Divider from '@mui/material/Divider';
 import ShowcaseContainer from 'docs/src/components/home/ShowcaseContainer';
 import { HighlightedCode } from '@mui/docs/HighlightedCode';
-import MarkdownElement from 'docs/src/components/markdown/MarkdownElement';
+
 import XGridGlobalStyles from 'docs/src/components/home/XGridGlobalStyles';
 import ProgressBar from 'docs/src/components/x-grid/ProgressBar';
 import EditProgress from 'docs/src/components/x-grid/EditProgress';
@@ -1728,12 +1728,7 @@ export default function DataTable() {
             },
           }}
         >
-          <HighlightedCode
-            copyButtonHidden
-            component={MarkdownElement}
-            code={code}
-            language="jsx"
-          />
+          <HighlightedCode copyButtonHidden plainStyle code={code} language="jsx" />
         </Box>
       }
     />
diff --git a/docs/src/components/home/CoreShowcase.tsx b/docs/src/components/home/CoreShowcase.tsx
index a2be6591894a1a..28a5cfff82bd92 100644
--- a/docs/src/components/home/CoreShowcase.tsx
+++ b/docs/src/components/home/CoreShowcase.tsx
@@ -5,7 +5,7 @@ import Button, { buttonClasses } from '@mui/material/Button';
 import { HighlightedCode } from '@mui/docs/HighlightedCode';
 import MaterialDesignDemo, { componentCode } from 'docs/src/components/home/MaterialDesignDemo';
 import ShowcaseContainer from 'docs/src/components/home/ShowcaseContainer';
-import MarkdownElement from 'docs/src/components/markdown/MarkdownElement';
+
 import PointerContainer, { Data } from 'docs/src/components/home/ElementPointer';
 import StylingInfo from 'docs/src/components/action/StylingInfo';
 import FlashCode from 'docs/src/components/animation/FlashCode';
@@ -184,12 +184,7 @@ export default function CoreShowcase() {
           >
             <Box sx={{ position: 'relative' }}>
               {startLine !== undefined && <FlashCode startLine={startLine} endLine={endLine} />}
-              <HighlightedCode
-                copyButtonHidden
-                component={MarkdownElement}
-                code={componentCode}
-                language="jsx"
-              />
+              <HighlightedCode copyButtonHidden plainStyle code={componentCode} language="jsx" />
               <StylingInfo appeared={customized} sx={{ mx: -2 }} />
             </Box>
           </Box>
diff --git a/docs/src/components/markdown/MarkdownElement.tsx b/docs/src/components/markdown/MarkdownElement.tsx
deleted file mode 100644
index 0fa3ed548afea2..00000000000000
--- a/docs/src/components/markdown/MarkdownElement.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import * as React from 'react';
-import clsx from 'clsx';
-import {
-  // alpha,
-  // darken,
-  styled,
-} from '@mui/material/styles';
-
-const Root = styled('div')(({ theme }) => ({
-  ...theme.typography.caption,
-  color: (theme.vars || theme).palette.text.primary,
-  '& pre': {
-    backgroundColor: 'hsl(210, 35%, 9%)', // a special, one-off, color tailored for the code blocks using MUI's branding theme blue palette as the starting point. It has a less saturaded color but still maintaining a bit of the blue tint.
-    color: '#f8f8f2', // fallback color until Prism's theme is loaded
-    overflow: 'auto',
-    margin: 0,
-    WebkitOverflowScrolling: 'touch', // iOS momentum scrolling.
-    maxWidth: 'calc(100vw - 32px)',
-    [theme.breakpoints.up('md')]: {
-      maxWidth: 'calc(100vw - 32px - 16px)',
-    },
-  },
-  '& code': {
-    // Avoid layout jump after hydration (style injected by prism)
-    ...theme.typography.caption,
-    fontFamily: theme.typography.fontFamilyCode,
-    fontWeight: 400,
-    WebkitFontSmoothing: 'subpixel-antialiased',
-    // Reset for Safari
-    // https://github.com/necolas/normalize.css/blob/master/normalize.css#L102
-    fontSize: '1em',
-  },
-}));
-
-type MarkdownElementProps = {
-  renderedMarkdown: string;
-} & Omit<JSX.IntrinsicElements['div'], 'ref'>;
-
-const MarkdownElement = React.forwardRef<HTMLDivElement, MarkdownElementProps>(
-  function MarkdownElement(props, ref) {
-    const { className, renderedMarkdown, ...other } = props;
-    const more: Record<string, unknown> = {};
-
-    if (typeof renderedMarkdown === 'string') {
-      // workaround for https://github.com/facebook/react/issues/17170
-      // otherwise we could just set `dangerouslySetInnerHTML={undefined}`
-      more.dangerouslySetInnerHTML = { __html: renderedMarkdown };
-    }
-
-    return <Root className={clsx('markdown-body', className)} {...more} {...other} ref={ref} />;
-  },
-);
-
-export default MarkdownElement;
diff --git a/docs/src/components/productBaseUI/BaseUIComponents.tsx b/docs/src/components/productBaseUI/BaseUIComponents.tsx
index f95e4bb54910e4..e2529dd258b002 100644
--- a/docs/src/components/productBaseUI/BaseUIComponents.tsx
+++ b/docs/src/components/productBaseUI/BaseUIComponents.tsx
@@ -17,7 +17,7 @@ import Section from 'docs/src/layouts/Section';
 import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
 import More from 'docs/src/components/action/More';
 import Frame from 'docs/src/components/action/Frame';
-import MarkdownElement from 'docs/src/components/markdown/MarkdownElement';
+
 import ROUTES from 'docs/src/route';
 
 // Switcher icons
@@ -181,7 +181,7 @@ export default function BaseUIComponents() {
               >
                 <HighlightedCode
                   copyButtonHidden
-                  component={MarkdownElement}
+                  plainStyle
                   code={(() => {
                     const result = CODES[demo];
                     if (typeof result === 'function') {
diff --git a/docs/src/components/productBaseUI/BaseUICustomization.tsx b/docs/src/components/productBaseUI/BaseUICustomization.tsx
index 5d016a8e378752..9111e449c4c837 100644
--- a/docs/src/components/productBaseUI/BaseUICustomization.tsx
+++ b/docs/src/components/productBaseUI/BaseUICustomization.tsx
@@ -15,7 +15,6 @@ import GradientText from 'docs/src/components/typography/GradientText';
 import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
 import FlashCode from 'docs/src/components/animation/FlashCode';
 import Frame from 'docs/src/components/action/Frame';
-import MarkdownElement from 'docs/src/components/markdown/MarkdownElement';
 
 const code = `
 import clsx from 'clsx';
@@ -307,12 +306,7 @@ export default function BaseUICustomization() {
             >
               <Box sx={{ position: 'relative', '&& pre': { bgcolor: 'transparent' } }}>
                 <Box sx={{ position: 'relative', zIndex: 1 }}>
-                  <HighlightedCode
-                    copyButtonHidden
-                    component={MarkdownElement}
-                    code={code}
-                    language="jsx"
-                  />
+                  <HighlightedCode copyButtonHidden plainStyle code={code} language="jsx" />
                 </Box>
                 <FlashCode startLine={startLine[index]} endLine={endLine[index]} sx={{ mx: -1 }} />
               </Box>
diff --git a/docs/src/components/productMaterial/MaterialComponents.tsx b/docs/src/components/productMaterial/MaterialComponents.tsx
index 2eeaa9e4918471..6ee5fad3b40b70 100644
--- a/docs/src/components/productMaterial/MaterialComponents.tsx
+++ b/docs/src/components/productMaterial/MaterialComponents.tsx
@@ -30,7 +30,7 @@ import More from 'docs/src/components/action/More';
 import Frame from 'docs/src/components/action/Frame';
 import { customTheme } from 'docs/src/components/home/MaterialDesignComponents';
 import { HighlightedCode } from '@mui/docs/HighlightedCode';
-import MarkdownElement from 'docs/src/components/markdown/MarkdownElement';
+
 import StylingInfo from 'docs/src/components/action/StylingInfo';
 import ROUTES from 'docs/src/route';
 
@@ -305,12 +305,7 @@ export default function MaterialComponents() {
                   height: '100%',
                 }}
               >
-                <HighlightedCode
-                  copyButtonHidden
-                  component={MarkdownElement}
-                  code={CODES[demo]}
-                  language="jsx"
-                />
+                <HighlightedCode copyButtonHidden plainStyle code={CODES[demo]} language="jsx" />
               </Box>
               <Box
                 sx={(theme) => ({
diff --git a/docs/src/components/productMaterial/MaterialStyling.tsx b/docs/src/components/productMaterial/MaterialStyling.tsx
index 30153e196f5d35..ec775c6dbc4886 100644
--- a/docs/src/components/productMaterial/MaterialStyling.tsx
+++ b/docs/src/components/productMaterial/MaterialStyling.tsx
@@ -14,7 +14,7 @@ import Item, { Group } from 'docs/src/components/action/Item';
 import Highlighter from 'docs/src/components/action/Highlighter';
 import Frame from 'docs/src/components/action/Frame';
 import RealEstateCard from 'docs/src/components/showcase/RealEstateCard';
-import MarkdownElement from 'docs/src/components/markdown/MarkdownElement';
+
 import FlashCode from 'docs/src/components/animation/FlashCode';
 
 const code = `
@@ -315,12 +315,7 @@ export default function MaterialStyling() {
             >
               <Box sx={{ position: 'relative', '&& pre': { bgcolor: 'transparent' } }}>
                 <Box sx={{ position: 'relative', zIndex: 1 }}>
-                  <HighlightedCode
-                    copyButtonHidden
-                    component={MarkdownElement}
-                    code={code}
-                    language="jsx"
-                  />
+                  <HighlightedCode copyButtonHidden plainStyle code={code} language="jsx" />
                 </Box>
                 <FlashCode startLine={startLine[index]} endLine={endLine[index]} sx={{ mx: -1 }} />
               </Box>
diff --git a/docs/src/components/productMaterial/MaterialTheming.tsx b/docs/src/components/productMaterial/MaterialTheming.tsx
index 683654fd05b927..a0c3560bbaebf1 100644
--- a/docs/src/components/productMaterial/MaterialTheming.tsx
+++ b/docs/src/components/productMaterial/MaterialTheming.tsx
@@ -12,7 +12,6 @@ import Highlighter from 'docs/src/components/action/Highlighter';
 import SvgMaterialDesign from 'docs/src/icons/SvgMaterialDesign';
 import Frame from 'docs/src/components/action/Frame';
 import PlayerCard from 'docs/src/components/showcase/PlayerCard';
-import MarkdownElement from 'docs/src/components/markdown/MarkdownElement';
 
 const code = `
 <Card
@@ -128,12 +127,7 @@ export default function MaterialTheming() {
               )}
             </Frame.Demo>
             <Frame.Info sx={{ maxHeight: 300, overflow: 'auto' }}>
-              <HighlightedCode
-                copyButtonHidden
-                component={MarkdownElement}
-                code={code}
-                language="jsx"
-              />
+              <HighlightedCode copyButtonHidden plainStyle code={code} language="jsx" />
             </Frame.Info>
           </Frame>
         </Grid>
diff --git a/docs/src/components/productX/XChartsDemo.tsx b/docs/src/components/productX/XChartsDemo.tsx
index 9dd5c593f51420..5cfef0e88a108b 100644
--- a/docs/src/components/productX/XChartsDemo.tsx
+++ b/docs/src/components/productX/XChartsDemo.tsx
@@ -4,7 +4,6 @@ import { BarChart } from '@mui/x-charts/BarChart';
 import { blueberryTwilightPaletteLight } from '@mui/x-charts';
 import { HighlightedCode } from '@mui/docs/HighlightedCode';
 import Frame from 'docs/src/components/action/Frame';
-import MarkdownElement from 'docs/src/components/markdown/MarkdownElement';
 
 const code = `
 <BarChart
@@ -54,7 +53,7 @@ export default function XChartsDemo() {
         </Paper>
       </Frame.Demo>
       <Frame.Info data-mui-color-scheme="dark" sx={{ maxHeight: 300, overflow: 'auto' }}>
-        <HighlightedCode copyButtonHidden component={MarkdownElement} code={code} language="jsx" />
+        <HighlightedCode copyButtonHidden plainStyle code={code} language="jsx" />
       </Frame.Info>
     </Frame>
   );
diff --git a/docs/src/components/productX/XDataGrid.tsx b/docs/src/components/productX/XDataGrid.tsx
index a9b63174ea61e8..ba20e10c83a996 100644
--- a/docs/src/components/productX/XDataGrid.tsx
+++ b/docs/src/components/productX/XDataGrid.tsx
@@ -19,7 +19,7 @@ import Item, { Group } from 'docs/src/components/action/Item';
 import Highlighter from 'docs/src/components/action/Highlighter';
 import More from 'docs/src/components/action/More';
 import Frame from 'docs/src/components/action/Frame';
-import MarkdownElement from 'docs/src/components/markdown/MarkdownElement';
+
 import FlashCode from 'docs/src/components/animation/FlashCode';
 import XGridGlobalStyles from 'docs/src/components/home/XGridGlobalStyles';
 import StylingInfo from 'docs/src/components/action/StylingInfo';
@@ -211,12 +211,7 @@ export default function XDataGrid() {
           >
             <Box sx={{ position: 'relative' }}>
               <Box sx={{ position: 'relative', zIndex: 1 }}>
-                <HighlightedCode
-                  copyButtonHidden
-                  component={MarkdownElement}
-                  code={code}
-                  language="jsx"
-                />
+                <HighlightedCode copyButtonHidden plainStyle code={code} language="jsx" />
               </Box>
               {demo && <FlashCode startLine={startLine[demo]} sx={{ mx: -2 }} />}
               <StylingInfo
diff --git a/docs/src/components/productX/XDateRangeDemo.tsx b/docs/src/components/productX/XDateRangeDemo.tsx
index f7482e4f605879..679a2b824c2ff3 100644
--- a/docs/src/components/productX/XDateRangeDemo.tsx
+++ b/docs/src/components/productX/XDateRangeDemo.tsx
@@ -12,7 +12,6 @@ import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { HighlightedCode } from '@mui/docs/HighlightedCode';
 import { startOfWeek, endOfWeek, subDays } from 'date-fns';
 import Frame from 'docs/src/components/action/Frame';
-import MarkdownElement from 'docs/src/components/markdown/MarkdownElement';
 
 const startDate = new Date();
 startDate.setDate(10);
@@ -187,7 +186,7 @@ export default function XDateRangeDemo() {
         </Paper>
       </Frame.Demo>
       <Frame.Info data-mui-color-scheme="dark" sx={{ maxHeight: 300, overflow: 'auto' }}>
-        <HighlightedCode copyButtonHidden component={MarkdownElement} code={code} language="jsx" />
+        <HighlightedCode copyButtonHidden plainStyle code={code} language="jsx" />
       </Frame.Info>
     </Frame>
   );
diff --git a/docs/src/components/productX/XTreeViewDemo.tsx b/docs/src/components/productX/XTreeViewDemo.tsx
index 7c87ea44fd4635..7cf620c9935071 100644
--- a/docs/src/components/productX/XTreeViewDemo.tsx
+++ b/docs/src/components/productX/XTreeViewDemo.tsx
@@ -19,7 +19,6 @@ import VideocamOutlined from '@mui/icons-material/VideocamOutlined';
 import FourKOutlined from '@mui/icons-material/FourKOutlined';
 import { HighlightedCode } from '@mui/docs/HighlightedCode';
 import Frame from 'docs/src/components/action/Frame';
-import MarkdownElement from 'docs/src/components/markdown/MarkdownElement';
 
 const CustomContent = React.forwardRef(function CustomContent(
   props: TreeItemContentProps & { lastNestedChild?: boolean },
@@ -330,7 +329,7 @@ export default function XDateRangeDemo() {
         </Paper>
       </Frame.Demo>
       <Frame.Info data-mui-color-scheme="dark" sx={{ maxHeight: 300, overflow: 'auto' }}>
-        <HighlightedCode copyButtonHidden component={MarkdownElement} code={code} language="jsx" />
+        <HighlightedCode copyButtonHidden plainStyle code={code} language="jsx" />
       </Frame.Info>
     </Frame>
   );
diff --git a/packages/mui-docs/src/HighlightedCode/HighlightedCode.tsx b/packages/mui-docs/src/HighlightedCode/HighlightedCode.tsx
index dd2d43fd020849..2f88f0d09476b5 100644
--- a/packages/mui-docs/src/HighlightedCode/HighlightedCode.tsx
+++ b/packages/mui-docs/src/HighlightedCode/HighlightedCode.tsx
@@ -2,16 +2,37 @@ import * as React from 'react';
 import prism from '@mui/internal-markdown/prism';
 import { NoSsr } from '@mui/base/NoSsr';
 import { ButtonProps } from '@mui/material/Button';
-import { SxProps } from '@mui/material/styles';
+import { SxProps, styled } from '@mui/material/styles';
 import { useCodeCopy, CodeCopyButton } from '../CodeCopy';
 import { MarkdownElement } from '../MarkdownElement';
 
+const Pre = styled('pre')(({ theme }) => ({
+  margin: 0,
+  color: 'hsl(60deg 30% 96.08%)', // fallback color until Prism's theme is loaded
+  WebkitOverflowScrolling: 'touch', // iOS momentum scrolling.
+  maxWidth: 'calc(100vw - 32px)',
+  [theme.breakpoints.up('md')]: {
+    maxWidth: 'calc(100vw - 32px - 16px)',
+  },
+  '& code': {
+    // Avoid layout jump after hydration (style injected by Prism)
+    ...theme.typography.caption,
+    fontFamily: theme.typography.fontFamilyCode,
+    fontWeight: 400,
+    WebkitFontSmoothing: 'subpixel-antialiased',
+    // Reset for Safari
+    // https://github.com/necolas/normalize.css/blob/master/normalize.css#L102
+  },
+}));
+
 export interface HighlightedCodeProps {
   code: string;
-  component?: React.ElementType;
   copyButtonHidden?: boolean;
   copyButtonProps?: ButtonProps;
   language: string;
+  parentComponent?: React.ElementType;
+  preComponent?: React.ElementType;
+  plainStyle?: boolean;
   sx?: SxProps;
 }
 
@@ -22,7 +43,9 @@ export const HighlightedCode = React.forwardRef<HTMLDivElement, HighlightedCodeP
       copyButtonProps,
       code,
       language,
-      component: Component = MarkdownElement,
+      plainStyle,
+      parentComponent: Component = plainStyle ? 'div' : MarkdownElement,
+      preComponent: PreComponent = plainStyle ? Pre : 'pre',
       ...other
     } = props;
     const renderedCode = React.useMemo(() => {
@@ -38,13 +61,13 @@ export const HighlightedCode = React.forwardRef<HTMLDivElement, HighlightedCodeP
               <CodeCopyButton code={code} {...copyButtonProps} />
             </NoSsr>
           )}
-          <pre>
+          <PreComponent>
             <code
               className={`language-${language}`}
               // eslint-disable-next-line react/no-danger
               dangerouslySetInnerHTML={{ __html: renderedCode }}
             />
-          </pre>
+          </PreComponent>
         </div>
       </Component>
     );