diff --git a/.changeset/giant-chefs-rule.md b/.changeset/giant-chefs-rule.md
new file mode 100644
index 000000000000..16d4df352a03
--- /dev/null
+++ b/.changeset/giant-chefs-rule.md
@@ -0,0 +1,6 @@
+---
+'@astrojs/mdx': patch
+'@astrojs/markdown-remark': patch
+---
+
+fix shiki css class replace logic
diff --git a/packages/integrations/mdx/src/remark-shiki.ts b/packages/integrations/mdx/src/remark-shiki.ts
index 7bb944ce615b..d4620194c6f0 100644
--- a/packages/integrations/mdx/src/remark-shiki.ts
+++ b/packages/integrations/mdx/src/remark-shiki.ts
@@ -66,7 +66,7 @@ const remarkShiki = async ({ langs = [], theme = 'github-dark', wrap = false }:
 			// <span class="line"
 
 			// Replace "shiki" class naming with "astro".
-			html = html.replace('<pre class="shiki"', `<pre class="astro-code"`);
+			html = html.replace(/<pre class="(.*?)shiki(.*?)"/, `<pre class="$1astro-code$2"`);
 			// Add "user-select: none;" for "+"/"-" diff symbols
 			if (node.lang === 'diff') {
 				html = html.replace(
diff --git a/packages/markdown/remark/src/remark-shiki.ts b/packages/markdown/remark/src/remark-shiki.ts
index 85463bd651fa..ad7c982f9f9f 100644
--- a/packages/markdown/remark/src/remark-shiki.ts
+++ b/packages/markdown/remark/src/remark-shiki.ts
@@ -70,8 +70,8 @@ const remarkShiki = async (
 
 			// Replace "shiki" class naming with "astro" and add "is:raw".
 			html = html.replace(
-				'<pre class="shiki"',
-				`<pre is:raw class="astro-code${scopedClassName ? ' ' + scopedClassName : ''}"`
+				/<pre class="(.*?)shiki(.*?)"/,
+				`<pre is:raw class="$1astro-code$2${scopedClassName ? ' ' + scopedClassName : ''}"`
 			);
 			// Add "user-select: none;" for "+"/"-" diff symbols
 			if (node.lang === 'diff') {