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('
{ 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 = ``; + node.value = `${html}
`; 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('${html}