diff --git a/docs/src/components/action/StylingInfo.tsx b/docs/src/components/action/StylingInfo.tsx
index 8e9eea208c0573..c5db6ea9a2ed60 100644
--- a/docs/src/components/action/StylingInfo.tsx
+++ b/docs/src/components/action/StylingInfo.tsx
@@ -40,7 +40,7 @@ export default function StylingInfo({
         p: 2,
         background: ({ palette }) => alpha(palette.common.black, 0.5),
         backdropFilter: 'blur(8px)',
-        zIndex: 1,
+        zIndex: 3,
         borderTop: '1px solid',
         borderColor: 'divider',
         borderRadius: '0 0 10px 10px',
diff --git a/docs/src/components/home/AdvancedShowcase.tsx b/docs/src/components/home/AdvancedShowcase.tsx
index 03eede016ad2dd..b1ee7c380b6df2 100644
--- a/docs/src/components/home/AdvancedShowcase.tsx
+++ b/docs/src/components/home/AdvancedShowcase.tsx
@@ -5,13 +5,13 @@ import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
 import Divider from '@mui/material/Divider';
 import ShowcaseContainer, { CodeContainer } from 'docs/src/components/home/ShowcaseContainer';
-import { HighlightedCode } from '@mui/docs/HighlightedCode';
-import { MarkdownElement } from '@mui/docs/MarkdownElement';
+import MarketingMarkdownElement from 'docs/src/components/markdown/MarketingMarkdownElement';
 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';
 import Status from 'docs/src/components/x-grid/Status';
 import EditStatus from 'docs/src/components/x-grid/EditStatus';
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
 
 const columns: Array<GridColDef> = [
   {
@@ -1716,7 +1716,7 @@ export default function DataTable() {
         <CodeContainer>
           <HighlightedCode
             copyButtonHidden
-            component={MarkdownElement}
+            component={MarketingMarkdownElement}
             code={code}
             language="jsx"
           />
diff --git a/docs/src/components/home/CoreShowcase.tsx b/docs/src/components/home/CoreShowcase.tsx
index 30841fd45e05d8..0d809c1eb7373d 100644
--- a/docs/src/components/home/CoreShowcase.tsx
+++ b/docs/src/components/home/CoreShowcase.tsx
@@ -3,7 +3,7 @@ import { alpha, ThemeProvider, createTheme, useTheme } from '@mui/material/style
 import Box from '@mui/material/Box';
 import Button, { buttonClasses } from '@mui/material/Button';
 import { HighlightedCode } from '@mui/docs/HighlightedCode';
-import { MarkdownElement } from '@mui/docs/MarkdownElement';
+import MarketingMarkdownElement from 'docs/src/components/markdown/MarketingMarkdownElement';
 import MaterialDesignDemo, { componentCode } from 'docs/src/components/home/MaterialDesignDemo';
 import ShowcaseContainer, { CodeContainer } from 'docs/src/components/home/ShowcaseContainer';
 import PointerContainer, { Data } from 'docs/src/components/home/ElementPointer';
@@ -169,7 +169,7 @@ export default function CoreShowcase() {
               {startLine !== undefined && <FlashCode startLine={startLine} endLine={endLine} />}
               <HighlightedCode
                 copyButtonHidden
-                component={MarkdownElement}
+                component={MarketingMarkdownElement}
                 code={componentCode}
                 language="jsx"
               />
diff --git a/docs/src/components/productBaseUI/BaseUIComponents.tsx b/docs/src/components/productBaseUI/BaseUIComponents.tsx
index d7e1e013218a76..bd958be428e5bc 100644
--- a/docs/src/components/productBaseUI/BaseUIComponents.tsx
+++ b/docs/src/components/productBaseUI/BaseUIComponents.tsx
@@ -9,6 +9,8 @@ import TabUnselectedRoundedIcon from '@mui/icons-material/TabUnselectedRounded';
 import InputRoundedIcon from '@mui/icons-material/InputRounded';
 import MenuOpenRoundedIcon from '@mui/icons-material/MenuOpenRounded';
 import LinearScaleRoundedIcon from '@mui/icons-material/LinearScaleRounded';
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
+import MarketingMarkdownElement from 'docs/src/components/markdown/MarketingMarkdownElement';
 import GradientText from 'docs/src/components/typography/GradientText';
 import Item, { Group } from 'docs/src/components/action/Item';
 import Highlighter from 'docs/src/components/action/Highlighter';
@@ -19,9 +21,6 @@ import Frame from 'docs/src/components/action/Frame';
 import ROUTES from 'docs/src/route';
 
 // switcher icons
-
-import { HighlightedCode } from '@mui/docs/HighlightedCode';
-import { MarkdownElement } from '@mui/docs/MarkdownElement';
 import BaseButtonDemo from './components/BaseButtonDemo';
 import BaseMenuDemo from './components/BaseMenuDemo';
 import BaseInputDemo from './components/BaseInputDemo';
@@ -182,7 +181,7 @@ export default function BaseUIComponents() {
               >
                 <HighlightedCode
                   copyButtonHidden
-                  component={MarkdownElement}
+                  component={MarketingMarkdownElement}
                   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 450b60234541d8..908f3658e22035 100644
--- a/docs/src/components/productBaseUI/BaseUICustomization.tsx
+++ b/docs/src/components/productBaseUI/BaseUICustomization.tsx
@@ -6,6 +6,8 @@ import { useSwitch, UseSwitchParameters } from '@mui/base/useSwitch';
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
+import MarketingMarkdownElement from 'docs/src/components/markdown/MarketingMarkdownElement';
 import SvgTwinkle from 'docs/src/icons/SvgTwinkle';
 import Section from 'docs/src/layouts/Section';
 import Highlighter from 'docs/src/components/action/Highlighter';
@@ -14,8 +16,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 { HighlightedCode } from '@mui/docs/HighlightedCode';
-import { MarkdownElement } from '@mui/docs/MarkdownElement';
 
 const code = `
 import clsx from 'clsx';
@@ -303,19 +303,16 @@ export default function BaseUICustomization() {
               sx={{
                 maxHeight: 450,
                 overflow: 'auto',
+                position: 'relative',
               }}
             >
-              <Box sx={{ position: 'relative', '&& pre': { bgcolor: 'transparent' } }}>
-                <Box sx={{ position: 'relative', zIndex: 1 }}>
-                  <HighlightedCode
-                    copyButtonHidden
-                    component={MarkdownElement}
-                    code={code}
-                    language="jsx"
-                  />
-                </Box>
-                <FlashCode startLine={startLine[index]} endLine={endLine[index]} sx={{ mx: -1 }} />
-              </Box>
+              <HighlightedCode
+                copyButtonHidden
+                component={MarketingMarkdownElement}
+                code={code}
+                language="jsx"
+              />
+              <FlashCode startLine={startLine[index]} endLine={endLine[index]} sx={{ mx: -1 }} />
             </Frame.Info>
           </Frame>
         </Grid>
diff --git a/docs/src/components/productMaterial/MaterialComponents.tsx b/docs/src/components/productMaterial/MaterialComponents.tsx
index 8a4607f314c49a..2a42f935c8d751 100644
--- a/docs/src/components/productMaterial/MaterialComponents.tsx
+++ b/docs/src/components/productMaterial/MaterialComponents.tsx
@@ -28,9 +28,9 @@ 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 MarketingMarkdownElement from 'docs/src/components/markdown/MarketingMarkdownElement';
 import { customTheme } from 'docs/src/components/home/MaterialDesignComponents';
 import { HighlightedCode } from '@mui/docs/HighlightedCode';
-import { MarkdownElement } from '@mui/docs/MarkdownElement';
 import StylingInfo from 'docs/src/components/action/StylingInfo';
 import ROUTES from 'docs/src/route';
 
@@ -346,7 +346,7 @@ export default function MaterialComponents() {
               >
                 <HighlightedCode
                   copyButtonHidden
-                  component={MarkdownElement}
+                  component={MarketingMarkdownElement}
                   code={CODES[demo]}
                   language="jsx"
                 />
diff --git a/docs/src/components/productMaterial/MaterialStyling.tsx b/docs/src/components/productMaterial/MaterialStyling.tsx
index 1e57630038d6f5..3b8eca6a29d9a1 100644
--- a/docs/src/components/productMaterial/MaterialStyling.tsx
+++ b/docs/src/components/productMaterial/MaterialStyling.tsx
@@ -13,8 +13,8 @@ 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 MarketingMarkdownElement from 'docs/src/components/markdown/MarketingMarkdownElement';
 import { HighlightedCode } from '@mui/docs/HighlightedCode';
-import { MarkdownElement } from '@mui/docs/MarkdownElement';
 import FlashCode from 'docs/src/components/animation/FlashCode';
 
 const code = `
@@ -311,19 +311,16 @@ export default function MaterialStyling() {
               sx={{
                 maxHeight: index === 2 ? 282 : 400,
                 overflow: 'auto',
+                position: 'relative',
               }}
             >
-              <Box sx={{ position: 'relative', '&& pre': { bgcolor: 'transparent' } }}>
-                <Box sx={{ zIndex: 1 }}>
-                  <HighlightedCode
-                    copyButtonHidden
-                    component={MarkdownElement}
-                    code={code}
-                    language="jsx"
-                  />
-                </Box>
-                <FlashCode startLine={startLine[index]} endLine={endLine[index]} sx={{ mx: -1 }} />
-              </Box>
+              <HighlightedCode
+                copyButtonHidden
+                component={MarketingMarkdownElement}
+                code={code}
+                language="jsx"
+              />
+              <FlashCode startLine={startLine[index]} endLine={endLine[index]} sx={{ mx: 1 }} />
             </Frame.Info>
           </Frame>
         </Grid>
diff --git a/docs/src/components/productMaterial/MaterialTheming.tsx b/docs/src/components/productMaterial/MaterialTheming.tsx
index 5324961df64cbb..432e88da4bc50a 100644
--- a/docs/src/components/productMaterial/MaterialTheming.tsx
+++ b/docs/src/components/productMaterial/MaterialTheming.tsx
@@ -11,8 +11,8 @@ 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 MarketingMarkdownElement from 'docs/src/components/markdown/MarketingMarkdownElement';
 import { HighlightedCode } from '@mui/docs/HighlightedCode';
-import { MarkdownElement } from '@mui/docs/MarkdownElement';
 
 const code = `
 <Card
@@ -130,7 +130,7 @@ export default function MaterialTheming() {
             <Frame.Info sx={{ maxHeight: 300, overflow: 'auto' }}>
               <HighlightedCode
                 copyButtonHidden
-                component={MarkdownElement}
+                component={MarketingMarkdownElement}
                 code={code}
                 language="jsx"
               />
diff --git a/docs/src/components/productX/XChartsDemo.tsx b/docs/src/components/productX/XChartsDemo.tsx
index 200649fda420dd..c28527a0a63ff2 100644
--- a/docs/src/components/productX/XChartsDemo.tsx
+++ b/docs/src/components/productX/XChartsDemo.tsx
@@ -2,9 +2,9 @@ import * as React from 'react';
 import Paper from '@mui/material/Paper';
 import { BarChart } from '@mui/x-charts/BarChart';
 import { blueberryTwilightPaletteLight } from '@mui/x-charts';
-import Frame from 'docs/src/components/action/Frame';
 import { HighlightedCode } from '@mui/docs/HighlightedCode';
-import { MarkdownElement } from '@mui/docs/MarkdownElement';
+import Frame from 'docs/src/components/action/Frame';
+import MarketingMarkdownElement from 'docs/src/components/markdown/MarketingMarkdownElement';
 
 const code = `
 <BarChart
@@ -54,7 +54,12 @@ 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
+          component={MarketingMarkdownElement}
+          code={code}
+          language="jsx"
+        />
       </Frame.Info>
     </Frame>
   );
diff --git a/docs/src/components/productX/XDataGrid.tsx b/docs/src/components/productX/XDataGrid.tsx
index 63b76f71b0db08..fedfc9d1ac50c2 100644
--- a/docs/src/components/productX/XDataGrid.tsx
+++ b/docs/src/components/productX/XDataGrid.tsx
@@ -10,6 +10,8 @@ import LibraryAddCheckRounded from '@mui/icons-material/LibraryAddCheckRounded';
 import SortByAlphaRounded from '@mui/icons-material/SortByAlphaRounded';
 import AutoStoriesOutlined from '@mui/icons-material/AutoStoriesOutlined';
 import FilterAltRounded from '@mui/icons-material/FilterAltRounded';
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
+import { Link } from '@mui/docs/Link';
 import Section from 'docs/src/layouts/Section';
 import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
 import GradientText from 'docs/src/components/typography/GradientText';
@@ -17,12 +19,10 @@ 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 { HighlightedCode } from '@mui/docs/HighlightedCode';
-import { MarkdownElement } from '@mui/docs/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';
-import { Link } from '@mui/docs/Link';
+import MarketingMarkdownElement from 'docs/src/components/markdown/MarketingMarkdownElement';
 import ROUTES from 'docs/src/route';
 
 const DEMOS = ['Editing', 'Selection', 'Sorting', 'Pagination', 'Filtering'] as const;
@@ -210,14 +210,12 @@ export default function XDataGrid() {
             }}
           >
             <Box sx={{ position: 'relative' }}>
-              <Box sx={{ position: 'relative', zIndex: 1 }}>
-                <HighlightedCode
-                  copyButtonHidden
-                  component={MarkdownElement}
-                  code={code}
-                  language="jsx"
-                />
-              </Box>
+              <HighlightedCode
+                copyButtonHidden
+                component={MarketingMarkdownElement}
+                code={code}
+                language="jsx"
+              />
               {demo && <FlashCode startLine={startLine[demo]} sx={{ mx: -2 }} />}
               <StylingInfo
                 appeared={demo === DEMOS[3] || demo === DEMOS[4]}
diff --git a/docs/src/components/productX/XDateRangeDemo.tsx b/docs/src/components/productX/XDateRangeDemo.tsx
index e1c8f32582d707..68dc1d19591e32 100644
--- a/docs/src/components/productX/XDateRangeDemo.tsx
+++ b/docs/src/components/productX/XDateRangeDemo.tsx
@@ -10,9 +10,9 @@ import { PickersShortcutsItem, PickersShortcutsProps, DateRange } from '@mui/x-d
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { startOfWeek, endOfWeek, subDays } from 'date-fns';
-import Frame from 'docs/src/components/action/Frame';
 import { HighlightedCode } from '@mui/docs/HighlightedCode';
-import { MarkdownElement } from '@mui/docs/MarkdownElement';
+import Frame from 'docs/src/components/action/Frame';
+import MarketingMarkdownElement from 'docs/src/components/markdown/MarketingMarkdownElement';
 
 const startDate = new Date();
 startDate.setDate(10);
@@ -187,7 +187,12 @@ 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
+          component={MarketingMarkdownElement}
+          code={code}
+          language="jsx"
+        />
       </Frame.Info>
     </Frame>
   );
diff --git a/docs/src/components/productX/XTreeViewDemo.tsx b/docs/src/components/productX/XTreeViewDemo.tsx
index a654666c7a4f48..942231f1669b6b 100644
--- a/docs/src/components/productX/XTreeViewDemo.tsx
+++ b/docs/src/components/productX/XTreeViewDemo.tsx
@@ -17,9 +17,9 @@ import PhotoOutlined from '@mui/icons-material/PhotoOutlined';
 import PictureAsPdfOutlined from '@mui/icons-material/PictureAsPdfOutlined';
 import VideocamOutlined from '@mui/icons-material/VideocamOutlined';
 import FourKOutlined from '@mui/icons-material/FourKOutlined';
-import Frame from 'docs/src/components/action/Frame';
 import { HighlightedCode } from '@mui/docs/HighlightedCode';
-import { MarkdownElement } from '@mui/docs/MarkdownElement';
+import Frame from 'docs/src/components/action/Frame';
+import MarketingMarkdownElement from 'docs/src/components/markdown/MarketingMarkdownElement';
 
 const CustomContent = React.forwardRef(function CustomContent(
   props: TreeItemContentProps & { lastNestedChild?: boolean },
@@ -330,7 +330,12 @@ 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
+          component={MarketingMarkdownElement}
+          code={code}
+          language="jsx"
+        />
       </Frame.Info>
     </Frame>
   );