From 12f65a4d55e3fd2993c2f67b18794dd536280c69 Mon Sep 17 00:00:00 2001
From: Giuseppe La Torre <giuseppelt@users.noreply.github.com>
Date: Thu, 12 Jan 2023 13:15:51 +0100
Subject: [PATCH] fix shiki css class replace logic in md and mdx integrations
 (#5837)

---
 .changeset/giant-chefs-rule.md                | 6 ++++++
 packages/integrations/mdx/src/remark-shiki.ts | 2 +-
 packages/markdown/remark/src/remark-shiki.ts  | 4 ++--
 3 files changed, 9 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/giant-chefs-rule.md

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 }:
 			// &lt;span class=&quot;line&quot;
 
 			// 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') {