### Install Starlight Image Zoom Plugin

Source: https://github.com/hideoo/starlight-image-zoom/blob/main/docs/src/content/docs/getting-started.mdx

Install the plugin using your preferred package manager. This is the first step in integrating the image zoom functionality.

```bash
npm install starlight-image-zoom
# or
yarn add starlight-image-zoom
# or
pnpm add starlight-image-zoom
```

--------------------------------

### Run Documentation Locally

Source: https://github.com/hideoo/starlight-image-zoom/blob/main/docs/README.md

Use pnpm to run the documentation site locally. Ensure pnpm is installed and configured for the project.

```shell
pnpm run dev

```

--------------------------------

### Import Zoom Component

Source: https://github.com/hideoo/starlight-image-zoom/blob/main/docs/src/content/docs/components/zoom.mdx

Import the Zoom component from the 'starlight-image-zoom/components' module.

```tsx
import { Zoom } from 'starlight-image-zoom/components'
```

--------------------------------

### HTML Image Syntax

Source: https://github.com/hideoo/starlight-image-zoom/blob/main/docs/src/content/docs/tests/shared-syntax.mdx

Use HTML `<img>` tag for image inclusion. Supports `src` and `alt` attributes.

```html
<img src="https://astro.build/assets/press/astro-logo-light-gradient.png" alt="Astro logo" />
```

--------------------------------

### Configure Starlight Image Zoom Plugin

Source: https://github.com/hideoo/starlight-image-zoom/blob/main/docs/src/content/docs/configuration.md

Integrate the Starlight Image Zoom plugin into your Astro project by adding it to the `integrations` array in `astro.config.mjs`. Configuration options for the plugin are passed as an object to the plugin function.

```javascript
import starlight from '@astrojs/starlight'
import { defineConfig } from 'astro/config'
import starlightImageZoom from 'starlight-image-zoom'

export default defineConfig({
  integrations: [
    starlight({
      plugins: [
        starlightImageZoom({
          // Configuration options go here.
        }),
      ],
      title: 'My Docs',
    }),
  ],
})
```

--------------------------------

### Astro Image Component with Zoom

Source: https://github.com/hideoo/starlight-image-zoom/blob/main/docs/src/content/docs/demo.mdx

Integrate the Astro `Image` component for optimized image loading and apply zoom effects. Import `Image` from 'astro:assets'.

```mdx
---
title: My page title
---

import { Image } from 'astro:assets'
import paper from '../../assets/paper.jpg'

<Image src={paper} alt="Brown pencil on white printing paper" />
```

--------------------------------

### Markdown Image Syntax

Source: https://github.com/hideoo/starlight-image-zoom/blob/main/docs/src/content/docs/tests/shared-syntax.mdx

Use Markdown syntax for basic image inclusion. Supports local and remote image URLs.

```markdown
![Starlight logo](../../../assets/tests/starlight-light.png)
```

```markdown
![Astro logo](https://astro.build/assets/press/astro-logo-light-gradient.png)
```

```markdown
![](../../../assets/tests/starlight-light.png)
```

```markdown
![D2 diagram](https://d2.atlas.lucas.tools/?script=KkktLuECBAAA__8%3D&)
```

--------------------------------

### HTML Picture Tag Syntax

Source: https://github.com/hideoo/starlight-image-zoom/blob/main/docs/src/content/docs/tests/shared-syntax.mdx

Use HTML `<picture>` tag for responsive images. Define multiple `<source>` elements for different media conditions.

```html
<picture>
  <source
    media="(prefers-color-scheme: dark)"
    srcset="https://astro.build/assets/press/astro-icon-light.png"
  />
  <img
    alt="Astro logomark"
    src="https://astro.build/assets/press/astro-icon-dark.png"
  />
</picture>
```

--------------------------------

### Astro Picture Component with Zoom

Source: https://github.com/hideoo/starlight-image-zoom/blob/main/docs/src/content/docs/demo.mdx

Utilize the Astro `Picture` component for responsive images with multiple formats (e.g., AVIF, WEBP) and enable zoom. Import `Picture` from 'astro:assets'.

```mdx
---
title: My page title
---

import { Picture } from 'astro:assets'
import blackboard from '../../assets/blackboard.jpg'

<Picture src={blackboard} formats={['avif', 'webp']} alt="A blackboard with a bunch of diagrams on it" />
```

--------------------------------

### Markdown Image with Zoom

Source: https://github.com/hideoo/starlight-image-zoom/blob/main/docs/src/content/docs/demo.mdx

Use standard Markdown image syntax within a Starlight page to enable zoom functionality. Ensure the image path is correct.

```markdown
---
title: My page title
---

![Ceramic mug on table](../../assets/mug.jpg)
```

--------------------------------

### Integrate ImageZoom in MarkdownContent Override

Source: https://github.com/hideoo/starlight-image-zoom/blob/main/docs/src/content/docs/getting-started.mdx

If you have a custom `MarkdownContent.astro` override, manually render the `ImageZoom` component from `starlight-image-zoom/components/ImageZoom.astro` to enable zoom functionality for images within your custom content.

```astro
---
// src/components/overrides/MarkdownContent.astro
import Default from '@astrojs/starlight/components/MarkdownContent.astro'
import ImageZoom from 'starlight-image-zoom/components/ImageZoom.astro'
---

<ImageZoom />
<p>Custom content in the MarkdownContent override</p>
<Default><slot /></Default>
```

--------------------------------

### Configure Starlight Image Zoom in astro.config.mjs

Source: https://github.com/hideoo/starlight-image-zoom/blob/main/docs/src/content/docs/getting-started.mdx

Add the starlight-image-zoom plugin to your Starlight configuration in `astro.config.mjs`. This enables the plugin for your documentation site.

```js
// astro.config.mjs
import starlight from '@astrojs/starlight'
import { defineConfig } from 'astro/config'
import starlightImageZoom from 'starlight-image-zoom'

export default defineConfig({
  integrations: [
    starlight({
      plugins: [starlightImageZoom()],
      title: 'My Docs',
    }),
  ],
})
```

--------------------------------

### Use Astro Image Component in MDX

Source: https://github.com/hideoo/starlight-image-zoom/blob/main/docs/src/content/docs/tests/specific-syntax.mdx

Use the `<Image>` component for displaying optimized images within MDX files. Ensure the image source is imported.

```mdx
import { Image } from 'astro:assets'
import starlightLight from '../../../assets/tests/starlight-light.png'

<Image src={starlightLight} alt="Starlight logo" />
```

--------------------------------

### Use Astro Picture Component in MDX

Source: https://github.com/hideoo/starlight-image-zoom/blob/main/docs/src/content/docs/tests/specific-syntax.mdx

Use the `<Picture>` component for responsive images within MDX files. Ensure the image source is imported.

```mdx
import { Picture } from 'astro:assets'
import starlightLight from '../../../assets/tests/starlight-light.png'

<Picture src={starlightLight} alt="Starlight logo" />
```

--------------------------------

### Using Zoom with an SVG Image Component

Source: https://github.com/hideoo/starlight-image-zoom/blob/main/docs/src/content/docs/tests/zoom.mdx

Import and use the Zoom component with an SVG image imported as an Astro component. This is useful for dynamically displaying SVGs with zoom functionality.

```astro
import { Zoom } from 'starlight-image-zoom/components'
import AstroLight from '../../../assets/tests/astro-light.svg'

<Zoom label="Astro logo SVG component">
  <AstroLight alt="Astro logo" />
</Zoom>
```

--------------------------------

### Use Zoom Component with SVG

Source: https://github.com/hideoo/starlight-image-zoom/blob/main/docs/src/content/docs/components/zoom.mdx

Wrap an SVG component with the Zoom component to make it zoomable. Provide a descriptive label for accessibility.

```mdx
---
// src/content/docs/example.mdx
title: My page title
---

import { Zoom } from 'starlight-image-zoom/components'
import Tv from '../../assets/tv.svg'

<Zoom label="TV drawing">
  <Tv />
</Zoom>
```

--------------------------------

### SVG Component with Zoom

Source: https://github.com/hideoo/starlight-image-zoom/blob/main/docs/src/content/docs/demo.mdx

Wrap an SVG component within the `Zoom` component from 'starlight-image-zoom/components' to enable zoom functionality for SVGs. Provide a label for accessibility.

```mdx
---
title: My page title
---

import { Zoom } from 'starlight-image-zoom/components'
import Tv from '../../assets/tv.svg'

<Zoom label="TV drawing">
  <Tv />
</Zoom>
```

--------------------------------

### Apply Styles to Zoomed Images Using data-zoom-id

Source: https://github.com/hideoo/starlight-image-zoom/blob/main/docs/src/content/docs/customization.mdx

When an image with an `id` is zoomed, its `id` is copied to the `data-zoom-id` attribute on the zoomed image. Use this attribute in CSS selectors to style zoomed images that were originally identified by their `id`.

```css
:root[data-theme='dark'] img[id^='mermaid-'],
:root[data-theme='dark'] img[data-zoom-id^='mermaid-'] {
  filter: invert(1);
}
```

--------------------------------

### JavaScript Code Block

Source: https://github.com/hideoo/starlight-image-zoom/blob/main/docs/src/content/docs/tests/specific-syntax.md

A simple JavaScript code block displayed without a frame. Ensure the file path is correct for execution.

```js
// src/example.js
console.log('Hello, world!')
```

--------------------------------

### Ignore Image with data-zoom-off Attribute

Source: https://github.com/hideoo/starlight-image-zoom/blob/main/docs/src/content/docs/ignoring-images.mdx

Add the `data-zoom-off` attribute to an `Image` component to prevent it from being zoomable. This is useful for specific images you don't want users to interact with.

```mdx
import { Preview } from '@hideoo/starlight-plugins-docs-components'
import { Image } from 'astro:assets'
import algorithm from '../../assets/demo/algorithm.jpg'
import ImageAttribution from '../../components/ImageAttribution.astro'

<Preview>

```mdx "data-zoom-off"
---
// src/content/docs/example.mdx
title: My page title
---

import { Image } from 'astro:assets'
import algorithm from '../../assets/demo/algorithm.jpg'

<Image src={algorithm} alt="A book with a diagram on it" data-zoom-off />
```

<Fragment slot="preview">

<Image src={algorithm} alt="A book with a diagram on it" data-zoom-off />

<ImageAttribution id="a-book-with-a-diagram-on-it-nuz3rK5iiKg" name="Андрей Сизов" username="alpridephoto" />

</Fragment>

</Preview>
```

--------------------------------

### Disable Zoom on Astro Image Component

Source: https://github.com/hideoo/starlight-image-zoom/blob/main/docs/src/content/docs/tests/zoom-off.mdx

When using Astro's `Image` component, pass the `data-zoom-off` attribute as a prop to disable zoom. Ensure you have imported the `Image` component from 'astro:assets'.

```astro
import { Image, Picture } from 'astro:assets'
import starlightLight from '../../../assets/tests/starlight-light.png'

<Image src={starlightLight} alt="Starlight logo" data-zoom-off />
```

--------------------------------

### Customize Backdrop Background Color

Source: https://github.com/hideoo/starlight-image-zoom/blob/main/docs/src/content/docs/customization.mdx

Set the `--starlight-image-zoom-backdrop-bg` CSS custom property to change the backdrop color in dark and light modes. Refer to Starlight's documentation for adding custom CSS.

```css
:root {
  /* Custom backdrop background color in dark mode. */
  --starlight-image-zoom-backdrop-bg: oklch(0 0 0);
}

:root[data-theme='light'] {
  /* Custom backdrop background color in light mode. */
  --starlight-image-zoom-backdrop-bg: oklch(100% 0 0);
}
```

--------------------------------

### Disable Zoom on HTML Image

Source: https://github.com/hideoo/starlight-image-zoom/blob/main/docs/src/content/docs/tests/zoom-off.mdx

Add the `data-zoom-off` attribute directly to an `<img>` tag to disable zoom for that specific image. This is useful for images that should not be interactive.

```html
<img src="https://astro.build/assets/press/astro-logo-light-gradient.png" alt="Astro logo" data-zoom-off />
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.