From 2ab32b59ef0a28d34757f2c2adb9cf2baa86855e Mon Sep 17 00:00:00 2001 From: Ben Holmes Date: Tue, 31 Jan 2023 17:46:59 -0500 Subject: [PATCH] [MDX] Syntax highlighting after user plugins (#6050) * fix: load MDX syntax highlighting after user plugins * chore: changeset --- .changeset/orange-carpets-greet.md | 5 +++++ packages/integrations/mdx/src/plugins.ts | 15 +++++++++------ 2 files changed, 14 insertions(+), 6 deletions(-) create mode 100644 .changeset/orange-carpets-greet.md diff --git a/.changeset/orange-carpets-greet.md b/.changeset/orange-carpets-greet.md new file mode 100644 index 0000000000..f862cf7841 --- /dev/null +++ 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 index 8c98e0016e..cf30566c46 100644 --- 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 { 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));