Image zoom in Docusaurus site
3 minute read
The goal is to add the image zoom capability in your Docusaurus project.
Prerequisites
You must have Docusaurus project on your machine. See my article about installing and configuring Docusaurus.
If you want to use my Docusaurus example site:
-
Fork the GitHub project or clone it to your machine:
git clone https://github.com/ivancheban/my-site.git
-
Install npm dependencies:
npm install
-
Run the project on your localhost:
npx docusaurus start
Your Docusaurus site opens in the browser on this localhost: http://localhost:3000/
Add image zoom plugin
To add the docusaurus-plugin-image-zoom
plugin, use the instructions from their npm package page or GitHub repo:
-
Open your project folder in VS Code or any other code editor.
-
Make sure you have the latest version of Docusaurus:
npx docusaurus --version
The current latest version is 2.4.1. To update to the latest version:
npm i @docusaurus/core@latest @docusaurus/preset-classic@latest
-
Type this command and press Enter:
npm install docusaurus-plugin-image-zoom
Note
The--force
option may be required if you haven’t updated your Docusaurus to the latest version. -
Add the following code to the
docusaurus.config.js
fileplugins
list:plugins: [ require.resolve('docusaurus-plugin-image-zoom') ],
-
Add the following code to the
docusaurus.config.js
filethemeConfig
object: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 } }, },
My example Docusaurus project config looks like this:
Click to expand
// @ts-check
// Note: type annotations allow type checking and IDEs autocompletion
const lightCodeTheme = require('prism-react-renderer/themes/github');
const darkCodeTheme = require('prism-react-renderer/themes/dracula');
/** @type {import('@docusaurus/types').Config} */
const config = {
title: 'Documentation site',
tagline: 'How to create your documentation site with Docusaurus',
url: 'https://your-docusaurus-test-site.com',
baseUrl: '/',
onBrokenLinks: 'throw',
onBrokenMarkdownLinks: 'warn',
favicon: 'img/favicon.ico',
organizationName: 'facebook', // Usually your GitHub org/user name.
projectName: 'docusaurus', // Usually your repo name.
presets: [
[
'classic',
/** @type {import('@docusaurus/preset-classic').Options} */
({
docs: {
sidebarPath: require.resolve('./sidebars.js'),
// Please change this to your repo.
editUrl: 'https://github.com/facebook/docusaurus/edit/main/website/',
},
googleAnalytics: {
trackingID: 'UA-162550995-21',
// anonymizeIP: true,
},
blog: {
showReadingTime: true,
// Please change this to your repo.
editUrl:
'https://github.com/facebook/docusaurus/edit/main/website/blog/',
},
theme: {
customCss: require.resolve('./src/css/custom.css'),
},
}),
],
],
plugins: [
require.resolve('docusaurus-plugin-image-zoom')
],
themeConfig:
/** @type {import('@docusaurus/preset-classic').ThemeConfig} */
({
navbar: {
title: 'Documentation site',
logo: {
alt: 'My Site Logo',
src: 'img/logo.svg',
},
items: [
{
type: 'doc',
docId: 'intro',
position: 'left',
label: 'Docs',
},
// {to: '/blog', label: 'Blog', position: 'left'},
{
href: 'https://github.com/facebook/docusaurus',
label: 'GitHub',
position: 'right',
},
],
},
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
}
},
footer: {
style: 'dark',
links: [
{
title: 'Docs',
items: [
{
label: 'Tutorial',
to: '/docs/intro',
},
],
},
{
title: 'Community',
items: [
{
label: 'Stack Overflow',
href: 'https://stackoverflow.com/questions/tagged/docusaurus',
},
{
label: 'Discord',
href: 'https://discordapp.com/invite/docusaurus',
},
{
label: 'Twitter',
href: 'https://twitter.com/docusaurus',
},
],
},
{
title: 'More',
items: [
{
label: 'Blog',
to: '/blog',
},
{
label: 'GitHub',
href: 'https://github.com/facebook/docusaurus',
},
],
},
],
copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`,
},
prism: {
theme: lightCodeTheme,
darkTheme: darkCodeTheme,
},
}),
};
module.exports = config;
Test your Docusaurus site locally to see if images are zoomed when you click them. To start your localhost:
npx docusaurus start
Feedback
Was this page helpful?
Glad to hear it! Please tell us how we can improve.
Sorry to hear that. Please tell us how we can improve.