Merge branch 'main' into fix-picture-example

.changeset/orange-carpets-greet.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/mdx': minor
+---
+
+Fix: load syntax highlighters after MDX remark plugins. This keeps MDX consistent with Astro's markdown behavior.

packages/integrations/image/README.md

@@ -259,7 +259,7 @@ color representation with 3 or 6 hexadecimal characters in the form `#123[abc]`,
 **Default:** `'cover'`
 </p>
 
-> This is not supported by the default Squoosh service. See the [installation section](#installing-sharp-optional) for details on using the `sharp` service instead.
+> This is not supported by the default Squoosh service. See the [installation section](#installing-sharp-optional) for details on using the `sharp` service instead. Read more about [how `sharp` resizes images](https://sharp.pixelplumbing.com/api-resize).
 
 How the image should be resized to fit both `height` and `width`.
 
@@ -271,7 +271,7 @@ How the image should be resized to fit both `height` and `width`.
 **Default:** `'centre'`
 </p>
 
-> This is not supported by the default Squoosh service. See the [installation section](#installing-sharp-optional) for details on using the `sharp` service instead.
+> This is not supported by the default Squoosh service. See the [installation section](#installing-sharp-optional) for details on using the `sharp` service instead. Read more about [how `sharp` resizes images](https://sharp.pixelplumbing.com/api-resize).
 
 Position of the crop when fit is `cover` or `contain`.
 
@@ -392,7 +392,7 @@ color representation with 3 or 6 hexadecimal characters in the form `#123[abc]`,
 **Default:** `'cover'`
 </p>
 
-> This is not supported by the default Squoosh service. See the [installation section](#installing-sharp-optional) for details on using the `sharp` service instead.
+> This is not supported by the default Squoosh service. See the [installation section](#installing-sharp-optional) for details on using the `sharp` service instead. Read more about [how `sharp` resizes images](https://sharp.pixelplumbing.com/api-resize).
 
 How the image should be resized to fit both `height` and `width`.
 
@@ -406,7 +406,7 @@ How the image should be resized to fit both `height` and `width`.
 **Default:** `'centre'`
 </p>
 
-> This is not supported by the default Squoosh service. See the [installation section](#installing-sharp-optional) for details on using the `sharp` service instead.
+> This is not supported by the default Squoosh service. See the [installation section](#installing-sharp-optional) for details on using the `sharp` service instead. Read more about [how `sharp` resizes images](https://sharp.pixelplumbing.com/api-resize).
 
 Position of the crop when fit is `cover` or `contain`.
 

packages/integrations/mdx/src/plugins.ts

@@ -129,12 +129,7 @@ export async function getRemarkPlugins(
 	config: AstroConfig
 ): Promise<MdxRollupPluginOptions['remarkPlugins']> {
 	let remarkPlugins: PluggableList = [];
-	if (mdxOptions.syntaxHighlight === 'shiki') {
-		remarkPlugins.push([await remarkShiki(mdxOptions.shikiConfig)]);
-	}
-	if (mdxOptions.syntaxHighlight === 'prism') {
-		remarkPlugins.push(remarkPrism);
-	}
+
 	if (mdxOptions.gfm) {
 		remarkPlugins.push(remarkGfm);
 	}
@@ -144,6 +139,14 @@ export async function getRemarkPlugins(
 
 	remarkPlugins = [...remarkPlugins, ...ignoreStringPlugins(mdxOptions.remarkPlugins)];
 
+	// Apply syntax highlighters after user plugins to match `markdown/remark` behavior
+	if (mdxOptions.syntaxHighlight === 'shiki') {
+		remarkPlugins.push([await remarkShiki(mdxOptions.shikiConfig)]);
+	}
+	if (mdxOptions.syntaxHighlight === 'prism') {
+		remarkPlugins.push(remarkPrism);
+	}
+
 	// Apply last in case user plugins resolve relative image paths
 	remarkPlugins.push(toRemarkContentRelImageError(config));