docusaurus-plugin-image-zoom

> Docusaurus plugin to utilize medium-zoom in your projects easily!

Install

``shell
npm install docusaurus-plugin-image-zoom
`

Usage

Update docusaurus.config.js to enable the plugin and include its default configuration:

`js
const config = {
// ...other config

plugins: [
'docusaurus-plugin-image-zoom', // can also just be '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
}
}
},
}

module.exports = config;
`

Configuration

This plugin allows you to configure the following options:

| 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. | {} |

Example usage in docusaurus.config.js:

`js
themeConfig: {
zoom: {
selector: '.markdown :not(em) > 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
}
}
},
``