Manually configure MDX integration

astro.config.ts

@@ -6,9 +6,9 @@ import { makeSidebar } from './config/sidebar';
 import rehypeSlug from 'rehype-slug';
 import remarkSmartypants from 'remark-smartypants';
 
+import { mdx } from './integrations/mdx';
 import { sitemap } from './integrations/sitemap';
 import { rehypeAutolink } from './plugins/rehype-autolink';
-import { rehypeOptimizeStatic } from './plugins/rehype-optimize-static';
 import { rehypeTasklistEnhancer } from './plugins/rehype-tasklist-enhancer';
 import { remarkFallbackLang } from './plugins/remark-fallback-lang';
 
@@ -65,6 +65,7 @@ export default defineConfig({
 			],
 		}),
 		sitemap(),
+		mdx(),
 	],
 	trailingSlash: 'always',
 	scopedStyleStrategy: 'where',
@@ -83,8 +84,6 @@ export default defineConfig({
 			...rehypeAutolink(),
 			// Tweak GFM task list syntax
 			rehypeTasklistEnhancer(),
-			// Collapse static parts of the hast to html
-			rehypeOptimizeStatic,
 		],
 	},
 	image: {

integrations/mdx.ts

@@ -0,0 +1,16 @@
+import AstroMdx from '@astrojs/mdx';
+import type { AstroIntegration } from 'astro';
+
+/** Add `@astrojs/mdx` integration after Starlight's injected `astro-expressive-code` integration */
+export function mdx(): AstroIntegration {
+	return {
+		name: 'add-mdx-integration',
+		hooks: {
+			'astro:config:setup': ({ config }) => {
+				const astroMdxIndex = config.integrations.findIndex((i) => i.name === '@astrojs/mdx');
+				// Replace Starlight injected `@astrojs/mdx` integration with our own
+				config.integrations.splice(astroMdxIndex, 1, AstroMdx({ optimize: true }));
+			},
+		},
+	};
+}

package.json

@@ -82,6 +82,7 @@
   },
   "dependencies": {
     "@astrojs/check": "^0.4.1",
+    "@astrojs/mdx": "^2.3.1",
     "@astrojs/sitemap": "^3.1.3",
     "@astrojs/starlight": "0.21.1",
     "@docsearch/js": "^3.5.2",