diff --git a/packages/astro/components/Code.astro b/packages/astro/components/Code.astro
index 339aaa9af5e6..e64c55fb0d65 100644
--- a/packages/astro/components/Code.astro
+++ b/packages/astro/components/Code.astro
@@ -35,8 +35,8 @@ 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"');
+	// Replace "shiki" class naming with "astro" and add "data-astro-raw".
+	html = html.replace('<pre class="shiki"', '<pre data-astro-raw class="astro-code"');
 	// Replace "shiki" css variable naming with "astro".
 	html = html.replace(/style="(background-)?color: var\(--shiki-/g, 'style="$1color: var(--astro-code-');
 	// Handle code wrapping
diff --git a/packages/markdown/remark/src/remark-shiki.ts b/packages/markdown/remark/src/remark-shiki.ts
index 91f1b76e352e..4226c6db6c66 100644
--- a/packages/markdown/remark/src/remark-shiki.ts
+++ b/packages/markdown/remark/src/remark-shiki.ts
@@ -40,8 +40,8 @@ const remarkShiki = async ({ langs = [], theme = 'github-dark', wrap = false }:
 		visit(tree, 'code', (node) => {
 			let html = highlighter.codeToHtml(node.value, { lang: node.lang ?? 'plaintext' });
 
-			// Replace "shiki" class naming with "astro".
-			html = html.replace('<pre class="shiki"', '<pre class="astro-code"');
+			// Replace "shiki" class naming with "astro" and add "data-astro-raw".
+			html = html.replace('<pre class="shiki"', '<pre data-astro-raw class="astro-code"');
 			// Replace "shiki" css variable naming with "astro".
 			html = html.replace(/style="(background-)?color: var\(--shiki-/g, 'style="$1color: var(--astro-code-');
 			// Handle code wrapping