[MDX] Syntax highlighting after user plugins (#6050)

* fix: load MDX syntax highlighting after user plugins * chore: changeset
withastro · Jan 31, 2023 · 2ab32b5 · 2ab32b5
1 parent 474ecc7
commit 2ab32b5
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 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/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));