fix shiki css class replace logic in md and mdx integrations (#5837)

withastro · Jan 12, 2023 · 12f65a4 · 12f65a4
1 parent c53b1fc
commit 12f65a4
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/.changeset/giant-chefs-rule.md 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
@@ -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
@@ -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') {