diff --git a/docs/data/material/customization/palette/CustomColor.tsx b/docs/data/material/customization/palette/CustomColor.tsx
index 61447a28cf34c3..47a0c8bbff768b 100644
--- a/docs/data/material/customization/palette/CustomColor.tsx
+++ b/docs/data/material/customization/palette/CustomColor.tsx
@@ -22,7 +22,7 @@ declare module '@mui/material/styles' {
   }
 }
 
-// Update the Button's color prop options
+// @babel-ignore-comment-in-output Update the Button's color prop options
 declare module '@mui/material/Button' {
   interface ButtonPropsColorOverrides {
     neutral: true;
diff --git a/docs/data/styles/basics/AdaptingHOC.tsx b/docs/data/styles/basics/AdaptingHOC.tsx
index ac19f1c174af6b..9c8a039cdb28c5 100644
--- a/docs/data/styles/basics/AdaptingHOC.tsx
+++ b/docs/data/styles/basics/AdaptingHOC.tsx
@@ -24,8 +24,8 @@ const styles = {
 interface MyButtonRawProps {
   color: 'red' | 'blue';
 }
-// These are the props available inside MyButtonRaw
-// They're different from MyButtonRawProps which are the props available for dynamic styling.
+// @babel-ignore-comment-in-output These are the props available inside MyButtonRaw
+// @babel-ignore-comment-in-output They're different from MyButtonRawProps which are the props available for dynamic styling.
 type MyButtonRawInnerProps = MyButtonRawProps & WithStyles<typeof styles>;
 
 function MyButtonRaw(
diff --git a/docs/scripts/formattedTSDemos.js b/docs/scripts/formattedTSDemos.js
index cdce47d9fa36b1..17e2f55f913162 100644
--- a/docs/scripts/formattedTSDemos.js
+++ b/docs/scripts/formattedTSDemos.js
@@ -27,6 +27,7 @@ const babelConfig = {
   generatorOpts: { retainLines: true },
   babelrc: false,
   configFile: false,
+  shouldPrintComment: (comment) => !comment.startsWith(' @babel-ignore-comment-in-output'),
 };
 
 const workspaceRoot = path.join(__dirname, '../../');