fix: curly braces inside Shiki (#2545)

withastro · Feb 8, 2022 · f0952a8 · f0952a8
1 parent c88a995
commit f0952a8
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git 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
@@ -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