fix: fixes an issue preventing to use Expressive Code attributes in M…

…arkdown files
HiDeoo · May 19, 2024 · ae1a490 · ae1a490
1 parent 8aace7a
commit ae1a490
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 2 deletions.
diff --git a/docs/src/content/docs/tests/specific-syntax.md b/docs/src/content/docs/tests/specific-syntax.md
@@ -0,0 +1,20 @@
+---
+title: Specific syntax Markdown
+slug: tests/specific-syntax-md
+pagefind: false
+---
+
+A code block with no frame:
+
+```js frame="none"
+// src/example.js
+console.log('Hello, world!')
+```
+
+A remote image using Markdown syntax:
+
+![Astro logo](https://astro.build/assets/press/astro-logo-light-gradient.png)
+
+A remote image using HTML syntax with the `img` tag:
+
+<img src="https://astro.build/assets/press/astro-logo-light-gradient.png" alt="Astro logo" />
diff --git a/packages/starlight-image-zoom/libs/integration.ts b/packages/starlight-image-zoom/libs/integration.ts
@@ -3,7 +3,7 @@ import rehypeRaw from 'rehype-raw'
 
 import type { StarlightImageZoomConfig } from '..'
 
-import { rehypeStarlightImageZoom } from './rehype'
+import { rehypeMetaString, rehypeStarlightImageZoom } from './rehype'
 import { vitePluginStarlightImageZoomConfig } from './vite'
 
 export function starlightImageZoomIntegration(config: StarlightImageZoomConfig): AstroIntegration {
@@ -13,7 +13,7 @@ export function starlightImageZoomIntegration(config: StarlightImageZoomConfig):
       'astro:config:setup': ({ updateConfig }) => {
         updateConfig({
           markdown: {
-            rehypePlugins: [rehypeRaw, rehypeStarlightImageZoom],
+            rehypePlugins: [rehypeMetaString, rehypeRaw, rehypeStarlightImageZoom],
           },
           vite: {
             plugins: [vitePluginStarlightImageZoomConfig(config)],

diff --git a/packages/starlight-image-zoom/libs/rehype.ts b/packages/starlight-image-zoom/libs/rehype.ts
@@ -106,3 +106,26 @@ export function rehypeStarlightImageZoom() {
     })
   }
 }
+
+/**
+ * rehype-raw strips the `meta` property from code blocks so we manually moved it to a `metastring` property which is
+ * supported by expressive-code.
+ *
+ * @see https://github.com/syntax-tree/hast-util-raw/issues/13
+ * @see https://github.com/expressive-code/expressive-code/blob/21fdaa441c89d6a6ac38f5d522b6b60741df2f5d/packages/rehype-expressive-code/src/utils.ts#L15
+ */
+export function rehypeMetaString() {
+  return function (tree: Root) {
+    visit(tree, ['element'], (node) => {
+      if (node.type === 'element' && node.tagName === 'code' && node.data?.meta) {
+        node.properties['metastring'] = node.data.meta
+      }
+    })
+  }
+}
+
+declare module 'hast' {
+  interface Data {
+    meta?: string
+  }
+}
diff --git a/packages/starlight-image-zoom/tests/specific-syntax.test.ts b/packages/starlight-image-zoom/tests/specific-syntax.test.ts
@@ -11,3 +11,9 @@ test('mdx: zooms an image using the `<Picture>` component', async ({ testPage })
 
   await expect(testPage.getNthImage(1)).toBeZoomedAfterClick()
 })
+
+test('md: preserves code block metadata', async ({ testPage }) => {
+  await testPage.goto('specific-syntax-md')
+
+  await expect(testPage.page.getByText('// src/example.js')).toBeVisible()
+})