Merge branch 'main' into fix/vercel-edge-ui-frameworks

withastro · Feb 1, 2023 · de9ad6d · de9ad6d
2 parents d5dc823 + e3e2498
commit de9ad6d
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 12 deletions.
diff --git a/.changeset/orange-carpets-greet.md b/.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.
diff --git a/packages/integrations/image/README.md b/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`.
 
@@ -333,7 +333,7 @@ The list of sizes that should be built for responsive images. This is combined w
 
 ```astro
 // Builds three images: 400x400, 800x800, and 1200x1200
-<Picture src={...} widths={[400, 800, 1200]} aspectRatio="1:1" />
+<Picture src={...} widths={[400, 800, 1200]} aspectRatio="1:1" alt="descriptive text" />
 ```
 
 #### aspectRatio
@@ -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`.
 
@@ -422,7 +422,10 @@ This can be helpful if you need to add preload links to a page's `<head>`.
 ---
 import { getImage } from '@astrojs/image';
 
-const { src } = await getImage({src: '../assets/hero.png'});
+const { src } = await getImage({
+    src: import('../assets/hero.png'),
+    alt: "My hero image"
+  });
 ---
 
 <html>

diff --git a/packages/integrations/mdx/src/plugins.ts b/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));