diff options
| author |  Juan MartÃn Seery <me@juanm04.com>
| 2022-02-08 02:48:00 -0300 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2022-02-08 00:48:00 -0500 |
| commit | f0952a8e5bbc75983bbf83e57dcb4d21ef322735 (patch) | |
| tree | 61b85db5d15b1c1b2620568785b6ce2d9cd73444 | |
| parent | c88a9951e4dcc653245bfbacd8c632e39fa3d8f8 (diff) | |
| download | astro-f0952a8e5bbc75983bbf83e57dcb4d21ef322735.tar.gz astro-f0952a8e5bbc75983bbf83e57dcb4d21ef322735.tar.zst astro-f0952a8e5bbc75983bbf83e57dcb4d21ef322735.zip | |
fix: curly braces inside Shiki (#2545)
| -rw-r--r-- | packages/astro/components/Code.astro | 4 | ||||
| -rw-r--r-- | packages/markdown/remark/src/remark-shiki.ts | 4 |
2 files changed, 4 insertions, 4 deletions
diff --git a/packages/astro/components/Code.astro b/packages/astro/components/Code.astro index 339aaa9af..e64c55fb0 100644 --- 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 index 91f1b76e3..4226c6db6 100644 --- 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 |