diff options
author | 2023-01-12 13:15:51 +0100 | |
---|---|---|
committer | 2023-01-12 20:15:51 +0800 | |
commit | 12f65a4d55e3fd2993c2f67b18794dd536280c69 (patch) | |
tree | 7841f84b39afcd3ae03bdc6dcc7188b27a308377 | |
parent | c53b1fca073136e1e1a6f5d0b32d7c023e98c675 (diff) | |
download | astro-12f65a4d55e3fd2993c2f67b18794dd536280c69.tar.gz astro-12f65a4d55e3fd2993c2f67b18794dd536280c69.tar.zst astro-12f65a4d55e3fd2993c2f67b18794dd536280c69.zip |
fix shiki css class replace logic in md and mdx integrations (#5837)
-rw-r--r-- | .changeset/giant-chefs-rule.md | 6 | ||||
-rw-r--r-- | packages/integrations/mdx/src/remark-shiki.ts | 2 | ||||
-rw-r--r-- | packages/markdown/remark/src/remark-shiki.ts | 4 |
3 files changed, 9 insertions, 3 deletions
diff --git a/.changeset/giant-chefs-rule.md b/.changeset/giant-chefs-rule.md new file mode 100644 index 000000000..16d4df352 --- /dev/null +++ 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 index 7bb944ce6..d4620194c 100644 --- 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 }: // <span class="line" // 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 index 85463bd65..ad7c982f9 100644 --- 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') { |