https://github.com/yixiaojiu/docusaurus-plugin-medium-zoom

medium-zoom plugin for docusaurus v2 and v3
https://github.com/yixiaojiu/docusaurus-plugin-medium-zoom

docusaurus docusaurus-plugin medium-zoom

Last synced: 2 months ago
JSON representation

medium-zoom plugin for docusaurus v2 and v3

• Host: GitHub
• URL: https://github.com/yixiaojiu/docusaurus-plugin-medium-zoom
• Owner: yixiaojiu
• License: mit
• Created: 2024-01-19T06:30:41.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-02-18T06:29:34.000Z (over 1 year ago)
• Last Synced: 2025-03-09T18:17:33.434Z (3 months ago)
• Topics: docusaurus, docusaurus-plugin, medium-zoom
• Language: TypeScript
• Homepage:
• Size: 379 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# docusaurus-plugin-medium-zoom

a medium-zoom plugin for docusaurus v2 and v3, refrence [docusaurus-plugin-image-zoom](https://github.com/gabrielcsapo/docusaurus-plugin-image-zoom).

## Installation

```sh

npm install docusaurus-plugin-medium-zoom

# or

yarn add docusaurus-plugin-medium-zoom

# or

pnpm add docusaurus-plugin-medium-zoom

```

## Usage

add the plugin in `docusaurus.config.ts` file:

```ts

// docusaurus.config.ts

import type { Config } from '@docusaurus/types'

import type { ThemeConfig, ZoomConfig } from 'docusaurus-plugin-medium-zoom'

export default {

  // ...other config

  plugins: [

    'docusaurus-plugin-image-zoom'

    // ...other plugins

  ],

  themeConfig: {

    // ...other themeConfig

    zoom: { selector: '.markdown img', background: {

      light: 'rgb(255, 255, 255)',

      dark: 'rgb(50, 50, 50)',

    }, config: {

      // options you can specify via https://github.com/francoischalifour/medium-zoom#usage

    } } satisfies ZoomConfig,

  } satisfies ThemeConfig,

} as Config

```

## Configuration

| Option        | Description                                                                                      | Default Value                                                                                         |

|---------------|--------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------|

| `selector`    | (optional) The selector to use for the images to zoom.                                          | `.markdown img`                                                                                      |

| `background`  | (optional) The background color to use for the zoomed image.                                     | `{ light: 'rgb(255, 255, 255)', dark: 'rgb(50, 50, 50)' }`                                           |

| `config`      | (optional) The configuration object to pass to `medium-zoom`.                                   | `{}`                                                                                                 |