style: 🎨 Added zoom to images

Added zoom to images

Author: roy-shiloh

docusaurus.config.js

@@ -15,6 +15,8 @@ const config = {
 	organizationName: 'Exlint.io',
 	projectName: 'Exlint Docs',
 
+	plugins: [require.resolve('docusaurus-plugin-image-zoom')],
+
 	presets: [
 		[
 			'@docusaurus/preset-classic',
@@ -115,14 +117,12 @@ const config = {
 				container: 'div',
 			},
 			zoom: {
-				selector: '.markdown img',
-				config: {
-					// options you can specify via https://github.com/francoischalifour/medium-zoom#usage
-					background: {
-						light: 'rgb(255, 255, 255)',
-						dark: 'rgb(50, 50, 50)',
-					},
+				selector: '.markdown :not(em) > img',
+				background: {
+					light: 'rgb(255, 255, 255)',
+					dark: 'rgb(50, 50, 50)',
 				},
+				config: {},
 			},
 		}),
 };

package.json

@@ -23,6 +23,7 @@
 		"@mdx-js/react": "1.6.22",
 		"commitizen": "^4.2.4",
 		"cz-vinyl": "^1.3.2",
+		"docusaurus-plugin-image-zoom": "0.1.1",
 		"prism-react-renderer": "^1.3.3",
 		"react": "^17.0.2",
 		"react-dom": "^17.0.2"