Enable zooming of images in markdown content

Use `docusaurus-plugin-image-zoom` to enable zooming of images in
markdown content.

Signed-off-by: Sergey Fedorov <[email protected]>

Author: sergefdrv

docusaurus.config.js

@@ -69,7 +69,8 @@ const config = {
         remarkPlugins: [remarkMath],
         rehypePlugins: [rehypeKatex],
       },
-    ]
+    ],
+    'image-zoom',
   ],
 
   presets: [
@@ -221,6 +222,14 @@ const config = {
         darkTheme: darkCodeTheme,
         additionalLanguages: ['bash'],
       },
+      zoom: {
+        selector: '.markdown img',
+        background: {
+          // Using `--ifm-color-white` in light theme because `--ifm-background-color` makes background transparent
+          light: 'var(--ifm-color-white)',
+          dark: 'var(--ifm-background-color)',
+        }
+      }
     }),
 };
 

package-lock.json

@@ -20,6 +20,7 @@
     "@mdx-js/react": "^3.0.1",
     "botex": "^1.0.0",
     "clsx": "^2.1.1",
+    "docusaurus-plugin-image-zoom": "^3.0.1",
     "prism-react-renderer": "^2.3.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",