docusaurus-plugin-image-zoom

docusaurus-plugin-image-zoom

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

Install

npm install docusaurus-plugin-image-zoom

Usage

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

  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:

  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
      }
    }
  },

Changelog

v3.0.1 (2025-02-07)

• [https://github.com/gabrielcsapo/docusaurus-plugin-image-zoom/commit/17423b7dbb8efa90e95baf2e7d825149c8bc9f33] ensure noEmit is false to have lib files properly show up in output

Committers: 1

• Gabriel Csapo (@gabrielcsapo)