diff --git a/docs/package.json b/docs/package.json
index 5bd80d1..74393da 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -13,8 +13,8 @@
"lint": "prettier -c --cache . && eslint . --cache --max-warnings=0"
},
"dependencies": {
- "@astrojs/starlight": "0.21.1",
- "astro": "4.5.1",
+ "@astrojs/starlight": "0.23.1",
+ "astro": "4.8.6",
"sharp": "0.33.2",
"starlight-image-zoom": "workspace:*",
"starlight-package-managers": "0.4.0"
diff --git a/docs/src/content/docs/tests/specific-syntax.md b/docs/src/content/docs/tests/specific-syntax.md
new file mode 100644
index 0000000..53259e9
--- /dev/null
+++ 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:
+
+
diff --git a/packages/starlight-image-zoom/libs/integration.ts b/packages/starlight-image-zoom/libs/integration.ts
index f89c2b9..21c89b3 100644
--- 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
index 42b8ba3..da220b9 100644
--- 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/package.json b/packages/starlight-image-zoom/package.json
index c7e5796..2462a60 100644
--- a/packages/starlight-image-zoom/package.json
+++ b/packages/starlight-image-zoom/package.json
@@ -21,14 +21,14 @@
"unist-util-visit-parents": "6.0.1"
},
"devDependencies": {
- "@astrojs/starlight": "0.21.1",
+ "@astrojs/starlight": "0.23.1",
"@playwright/test": "1.42.1",
"@types/hast": "3.0.4",
- "astro": "4.5.1",
+ "astro": "4.8.6",
"mdast-util-mdx-jsx": "3.1.2"
},
"peerDependencies": {
- "@astrojs/starlight": ">=0.20.0"
+ "@astrojs/starlight": ">=0.22.0"
},
"engines": {
"node": ">=18"
diff --git a/packages/starlight-image-zoom/tests/specific-syntax.test.ts b/packages/starlight-image-zoom/tests/specific-syntax.test.ts
index 0722b96..5011b66 100644
--- 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 `