From 07eee729f570bdfc591541a63b1aa6e8551ce1af Mon Sep 17 00:00:00 2001
From: Giuseppe La Torre <giuseppelt@users.noreply.github.com>
Date: Wed, 11 Jan 2023 04:08:27 +0100
Subject: [PATCH 1/2] Fix `Code.astro` shiki css class replace logic

The replace uses a regex witch matches anything extra, and adds it back to the css class.

Closes #5828
---
 .changeset/sweet-rocks-count.md      | 5 +++++
 packages/astro/components/Code.astro | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/sweet-rocks-count.md

diff --git a/.changeset/sweet-rocks-count.md b/.changeset/sweet-rocks-count.md
new file mode 100644
index 000000000000..7f6228934661
--- /dev/null
+++ b/.changeset/sweet-rocks-count.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix `Code.astro` shiki css class replace logic
diff --git a/packages/astro/components/Code.astro b/packages/astro/components/Code.astro
index 8bd3476a1133..15aa21e27b89 100644
--- a/packages/astro/components/Code.astro
+++ b/packages/astro/components/Code.astro
@@ -37,7 +37,7 @@ const { code, lang = 'plaintext', theme = 'github-dark', wrap = false } = Astro.
 /** Replace the shiki class name with a custom astro class name. */
 function repairShikiTheme(html: string): string {
 	// 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"');
 	// Handle code wrapping
 	// if wrap=null, do nothing.
 	if (wrap === false) {

From 69b872cd47bf50facae6cee3b448a1e9967ce34e Mon Sep 17 00:00:00 2001
From: Giuseppe La Torre <giuseppelt@users.noreply.github.com>
Date: Wed, 11 Jan 2023 14:09:43 +0100
Subject: [PATCH 2/2] Make regex non-greedy

Co-authored-by: Bjorn Lu <bjornlu.dev@gmail.com>
---
 packages/astro/components/Code.astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/astro/components/Code.astro b/packages/astro/components/Code.astro
index 15aa21e27b89..5066b9594dfb 100644
--- a/packages/astro/components/Code.astro
+++ b/packages/astro/components/Code.astro
@@ -37,7 +37,7 @@ const { code, lang = 'plaintext', theme = 'github-dark', wrap = false } = Astro.
 /** Replace the shiki class name with a custom astro class name. */
 function repairShikiTheme(html: string): string {
 	// Replace "shiki" class naming with "astro"
-	html = html.replace(/<pre class="(.*)shiki(.*)"/, '<pre class="$1astro-code$2"');
+	html = html.replace(/<pre class="(.*?)shiki(.*?)"/, '<pre class="$1astro-code$2"');
 	// Handle code wrapping
 	// if wrap=null, do nothing.
 	if (wrap === false) {