Reverts to MDX snippets and adds ignore to prevent them from breaking prettier

docs/_snippets/checkbox-story.md

@@ -1,3 +1,4 @@
+<!-- prettier-ignore -->
 ```mdx filename="Checkbox.mdx" renderer="common" language="mdx"
 import { Canvas, Meta } from '@storybook/blocks';
 
@@ -14,6 +15,7 @@ Use checkboxes to select one or more options from a list of choices.
 <Canvas of={CheckboxStories.Unchecked} />
 ```
 
+<!-- prettier-ignore -->
 ```mdx filename="Checkbox.mdx" renderer="svelte" language="mdx" tabTitle="Svelte CSF"
 import { Canvas, Meta } from '@storybook/blocks';
 
@@ -30,6 +32,7 @@ Use checkboxes to select one or more options from a list of choices.
 <Canvas of={CheckboxStories.Unchecked} />
 ```
 
+<!-- prettier-ignore -->
 ```mdx filename="Checkbox.mdx" renderer="svelte" language="mdx" tabTitle="CSF"
 import { Canvas, Meta } from '@storybook/blocks';
 

docs/_snippets/csf-3-example-title.md

@@ -1,4 +1,5 @@
-```jsx filename="src/components/Button/Button.mdx" renderer="common" language="mdx"
+<!-- prettier-ignore -->
+```mdx filename="src/components/Button/Button.mdx" renderer="common" language="mdx"
 import { Meta, Story } from '@storybook/blocks';
 
 {/* 👇 Documentation-only page */}

docs/_snippets/custom-docs-page.md

@@ -14,9 +14,8 @@ export function CustomDocumentationComponent() {
 }
 ```
 
-```jsx renderer="common" language="mdx"
-{/* Custom-MDX-Documentation.mdx */}
-
+<!-- prettier-ignore -->
+```mdx filename="Custom-MDX-Documentation.mdx" renderer="common" language="mdx"
 # Replacing DocsPage with custom `MDX` content
 
 This file is a documentation-only `MDX`file to customize Storybook's [DocsPage](https://storybook.js.org/docs/writing-docs/docs-page#replacing-docspage).

docs/_snippets/my-component-with-custom-syntax-highlight.md

@@ -1,6 +1,5 @@
-````jsx renderer="common" language="mdx"
-{/* MyComponent.mdx */}
-
+<!-- prettier-ignore -->
+```mdx filename="MyComponent.mdx" renderer="common" language="mdx"
 import { Meta } from '@storybook/blocks';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 
@@ -27,4 +26,4 @@ body {
 export const Component = () => {
   return <SyntaxHighlighter/>;
 };
-````
+```

docs/_snippets/my-component-with-global-syntax-highlight.md

@@ -1,6 +1,5 @@
-````js renderer="common" language="mdx"
-{/* MyComponent.mdx */}
-
+<!-- prettier-ignore -->
+```mdx filename="MyComponent.mdx" renderer="common" language="mdx"
 import { Meta } from '@storybook/blocks';
 
 <Meta title="A storybook story with syntax highlight registered globally" />
@@ -20,4 +19,4 @@ font: 100% $font-stack;
   color: $primary-color;
 }
 "
-````
+```

docs/_snippets/storybook-auto-docs-baseline-example.md

@@ -1,3 +1,4 @@
+<!-- prettier-ignore -->
 ```mdx filename="Button.mdx" renderer="common" language="mdx" tabTitle="custom-title"
 import { Meta, Controls } from '@storybook/blocks';
 
@@ -22,6 +23,7 @@ Button has the following properties:
 <Controls />
 ```
 
+<!-- prettier-ignore -->
 ```mdx filename="Button.mdx" renderer="common" language="mdx" tabTitle="of-prop"
 import { Meta, Controls } from '@storybook/blocks';
 

docs/_snippets/storybook-auto-docs-custom-file.md

@@ -1,3 +1,4 @@
+<!-- prettier-ignore -->
 ```mdx filename="src/components/Select.mdx" renderer="common" language="mdx"
 # Select
 

docs/_snippets/storybook-auto-docs-mdx-docs-docs-only-page.md

@@ -1,3 +1,4 @@
+<!-- prettier-ignore -->
 ```mdx filename="ExampleDocumentation.mdx" renderer="common" language="mdx"
 import { Meta } from '@storybook/blocks';
 
@@ -12,6 +13,7 @@ import * as ExampleComponentStories from './ExampleComponent.stories';
 <Meta of={ExampleComponentStories} />
 ```
 
+<!-- prettier-ignore -->
 ```mdx filename="ExampleDocumentation.mdx" renderer="svelte" language="mdx" tabTitle="Svelte CSF"
 import { Meta } from '@storybook/blocks';
 
@@ -26,6 +28,7 @@ import * as ExampleComponentStories from './ExampleComponent.stories.svelte';
 <Meta of={ExampleComponentStories} />
 ```
 
+<!-- prettier-ignore -->
 ```mdx filename="ExampleDocumentation.mdx" renderer="svelte" language="mdx" tabTitle="CSF"
 import { Meta } from '@storybook/blocks';
 

docs/_snippets/storybook-auto-docs-mdx-docs-dos-donts.md

@@ -1,16 +1,13 @@
-```jsx filename="Guideline.mdx" renderer="common" language="mdx"
+<!-- prettier-ignore -->
+```mdx filename="Guideline.mdx" renderer="common" language="mdx"
 <Guidelines>
   <Dos>
-    {`
     - Use buttons for the main actions on your page
-    - Identify the primary action and make it \`primary\`
-    `}
+    - Identify the primary action and make it `primary`
   </Dos>
   <Donts>
-    {`
     - Use a button when a link will do (e.g., for navigation-only actions)
-    - Use multiple \`primary\` buttons in a single UI state
-    `}
+    - Use multiple `primary` buttons in a single UI state
   </Donts>
 </Guidelines>
 ```

docs/_snippets/storybook-auto-docs-mdx-docs-imports.md

@@ -1,16 +1,19 @@
-```jsx filename="Checkbox.mdx" renderer="common" language="mdx"
+<!-- prettier-ignore -->
+```mdx filename="Checkbox.mdx" renderer="common" language="mdx"
 import { Canvas, Meta } from '@storybook/blocks';
 
 import * as CheckboxStories from './Checkbox.stories';
 ```
 
-```jsx filename="Checkbox.mdx" renderer="svelte" language="mdx" tabTitle="Svelte CSF"
+<!-- prettier-ignore -->
+```mdx filename="Checkbox.mdx" renderer="svelte" language="mdx" tabTitle="Svelte CSF"
 import { Canvas, Meta } from '@storybook/blocks';
 
 import * as CheckboxStories from './Checkbox.stories.svelte';
 ```
 
-```jsx filename="Checkbox.mdx" renderer="svelte" language="mdx" tabTitle="CSF"
+<!-- prettier-ignore -->
+```mdx filename="Checkbox.mdx" renderer="svelte" language="mdx" tabTitle="CSF"
 import { Canvas, Meta } from '@storybook/blocks';
 
 import * as CheckboxStories from './Checkbox.stories';

docs/_snippets/storybook-auto-docs-mdx-docs-meta-block.md

@@ -1,3 +1,4 @@
+<!-- prettier-ignore -->
 ```mdx filename="Checkbox.mdx" renderer="common" language="mdx"
 import { Meta } from '@storybook/blocks';
 
@@ -6,6 +7,7 @@ import * as CheckboxStories from './Checkbox.stories';
 <Meta of={CheckboxStories} />
 ```
 
+<!-- prettier-ignore -->
 ```mdx filename="Checkbox.mdx" renderer="svelte" language="mdx" tabTitle="Svelte CSF"
 import { Meta } from '@storybook/blocks';
 
@@ -14,6 +16,7 @@ import * as CheckboxStories from './Checkbox.stories.svelte';
 <Meta of={CheckboxStories} />
 ```
 
+<!-- prettier-ignore -->
 ```mdx filename="Checkbox.mdx" renderer="svelte" language="mdx" tabTitle="CSF"
 import { Meta } from '@storybook/blocks';
 

docs/_snippets/storybook-auto-docs-mdx-docs-story.md

@@ -1,3 +1,4 @@
+<!-- prettier-ignore -->
 ```mdx filename="Checkbox.mdx" renderer="common" language="mdx"
 import { Canvas } from '@storybook/blocks';
 
@@ -14,6 +15,7 @@ import * as CheckboxStories from './Checkbox.stories.svelte';
 <Canvas of={CheckboxStories.Unchecked} />
 ```
 
+<!-- prettier-ignore -->
 ```mdx filename="Checkbox.mdx" renderer="svelte" language="mdx" tabTitle="CSF"
 import { Canvas } from '@storybook/blocks';
 

docs/_snippets/storybook-auto-docs-mdx-file.md

@@ -1,3 +1,4 @@
+<!-- prettier-ignore -->
 ```mdx filename="Page.mdx" renderer="common" language="mdx"
 import { Canvas, Meta, Story } from '@storybook/blocks';
 
@@ -36,6 +37,7 @@ List items are used to group related content in a list. They must be nested with
 <Story of={ListItemStories.Starter} meta={ListItemStories} />
 ```
 
+<!-- prettier-ignore -->
 ```mdx filename="Page.mdx" renderer="svelte" language="mdx" tabTitle="Svelte CSF"
 import { Canvas, Meta, Story } from '@storybook/blocks';
 
@@ -74,6 +76,7 @@ List items are used to group related content in a list. They must be nested with
 <Story of={ListItemStories.Starter} meta={ListItemStories} />
 ```
 
+<!-- prettier-ignore -->
 ```mdx filename="Page.mdx" renderer="svelte" language="mdx" tabTitle="CSF"
 import { Canvas, Meta, Story } from '@storybook/blocks';
 

docs/_snippets/storybook-auto-docs-standalone-page.md

@@ -1,3 +1,4 @@
+<!-- prettier-ignore -->
 ```mdx filename="src/GettingStarted.mdx" renderer="common" language="mdx"
 # Getting Started
 

docs/_snippets/storybook-auto-docs-starter-example.md

@@ -1,3 +1,4 @@
+<!-- prettier-ignore -->
 ```mdx filename="Button.mdx" renderer="common" language="mdx"
 import { Meta, Story } from '@storybook/blocks';
 
@@ -18,6 +19,7 @@ Buttons are often used for form submissions and to toggle elements into view.
 <Story of={ButtonStories.Basic} />
 ```
 
+<!-- prettier-ignore -->
 ```mdx filename="Button.mdx" renderer="svelte" language="mdx" tabTitle="Svelte CSF"
 import { Meta, Story } from '@storybook/blocks';
 
@@ -38,6 +40,7 @@ Buttons are often used for form submissions and to toggle elements into view.
 <Story of={ButtonStories.Basic} />
 ```
 
+<!-- prettier-ignore -->
 ```mdx filename="Button.mdx" renderer="svelte" language="mdx" tabTitle="CSF"
 import { Meta, Story } from '@storybook/blocks';
 

docs/_snippets/storybook-custom-docs-markdown.md

@@ -1,3 +1,4 @@
+<!-- prettier-ignore -->
 ```mdx filename="Changelog.mdx" renderer="common" language="mdx"
 import { Meta, Markdown } from '@storybook/blocks';
 

docs/_snippets/storybook-mdx-template-with-prop.md

@@ -1,4 +1,5 @@
-```jsx filename="DocumentationTemplate.mdx" renderer="common" language="mdx"
+<!-- prettier-ignore -->
+```mdx filename="DocumentationTemplate.mdx" renderer="common" language="mdx"
 import { Meta, Title, Primary, Controls, Stories } from '@storybook/blocks';
 
 {/*