From b2c37385f94614232d9a378ef2ef3264d5405cc8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Juan=20Mart=C3=ADn=20Seery?= <me@juanm04.com>
Date: Thu, 3 Mar 2022 14:34:36 -0300
Subject: [PATCH] chore: changed `data-astro-raw` to `is:raw` (#2706)

* chore: changed `data-astro-raw` to `is:raw`

* changesets
---
 .changeset/thirty-lobsters-ring.md            | 6 ++++++
 packages/astro/components/Code.astro          | 4 ++--
 packages/markdown/remark/src/rehype-escape.ts | 2 +-
 packages/markdown/remark/src/remark-prism.ts  | 2 +-
 packages/markdown/remark/src/remark-shiki.ts  | 4 ++--
 5 files changed, 12 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/thirty-lobsters-ring.md

diff --git a/.changeset/thirty-lobsters-ring.md b/.changeset/thirty-lobsters-ring.md
new file mode 100644
index 000000000000..569ac6be4655
--- /dev/null
+++ b/.changeset/thirty-lobsters-ring.md
@@ -0,0 +1,6 @@
+---
+'astro': patch
+'@astrojs/markdown-remark': patch
+---
+
+Changed `data-astro-raw` to `is:raw` internally
diff --git a/packages/astro/components/Code.astro b/packages/astro/components/Code.astro
index 62551177499a..32c441495667 100644
--- a/packages/astro/components/Code.astro
+++ b/packages/astro/components/Code.astro
@@ -36,8 +36,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" and add "data-astro-raw".
-	html = html.replace('<pre class="shiki"', '<pre data-astro-raw class="astro-code"');
+	// Replace "shiki" class naming with "astro" and add "is:raw".
+	html = html.replace('<pre class="shiki"', '<pre is: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/rehype-escape.ts b/packages/markdown/remark/src/rehype-escape.ts
index 04c931fbfe78..bb56166be212 100644
--- a/packages/markdown/remark/src/rehype-escape.ts
+++ b/packages/markdown/remark/src/rehype-escape.ts
@@ -4,7 +4,7 @@ export default function rehypeEscape(): any {
 	return function (node: any): any {
 		return visit(node, 'element', (el) => {
 			if (el.tagName === 'code' || el.tagName === 'pre') {
-				el.properties['data-astro-raw'] = true;
+				el.properties['is:raw'] = true;
 			}
 			return el;
 		});
diff --git a/packages/markdown/remark/src/remark-prism.ts b/packages/markdown/remark/src/remark-prism.ts
index cb6d1cd8e149..549e09783f2a 100644
--- a/packages/markdown/remark/src/remark-prism.ts
+++ b/packages/markdown/remark/src/remark-prism.ts
@@ -56,7 +56,7 @@ function transformer(className: MaybeString) {
 			if (className) {
 				classes.push(className);
 			}
-			node.value = `<pre class="${classes.join(' ')}"><code data-astro-raw class="${classLanguage}">${html}</code></pre>`;
+			node.value = `<pre class="${classes.join(' ')}"><code is:raw class="${classLanguage}">${html}</code></pre>`;
 			return node;
 		};
 		return visit(tree, 'code', visitor);
diff --git a/packages/markdown/remark/src/remark-shiki.ts b/packages/markdown/remark/src/remark-shiki.ts
index b482a18fcce7..5bee7ef6e7bd 100644
--- a/packages/markdown/remark/src/remark-shiki.ts
+++ b/packages/markdown/remark/src/remark-shiki.ts
@@ -50,8 +50,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" and add "data-astro-raw".
-			html = html.replace('<pre class="shiki"', '<pre data-astro-raw class="astro-code"');
+			// Replace "shiki" class naming with "astro" and add "is:raw".
+			html = html.replace('<pre class="shiki"', '<pre is: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