The MkDocs PanZoom Plugin is an active MkDocs plugin, currently at version 0.5.2, designed to add pan and zoom functionality to images and Mermaid/D2 diagrams within your MkDocs generated documentation. It enhances user interaction with visual content by allowing navigation and magnification, and it maintains a steady release cadence with recent updates improving performance and features.
pip install mkdocs-panzoom-pluginNo compatibility data collected yet for this library.
To activate the plugin, add `panzoom` to your `plugins` list in `mkdocs.yml`. For Mermaid and D2 diagrams to work correctly with pan/zoom since version 0.4.0, you must also configure `pymdownx.superfences` under `markdown_extensions` and define your `site_url`. The example demonstrates enabling pan/zoom for images, showing the hint permanently, setting an initial zoom, and configuring `pymdownx.superfences`.
Add `markdown_extensions` for `pymdownx.superfences` as shown in the quickstart, ensure `site_url` is set, and use the `pz-ignore` class for individual exclusions instead of `exclude` pages option.
Ensure `site_url: https://your-domain.com/your-docs/` is present and correctly configured in your `mkdocs.yml`.
For specific item exclusion, apply the `pz-ignore` class directly to the HTML element or Markdown that generates it. E.g., `{.pz-ignore}`.Add or ensure the `site_url` is correctly defined in your `mkdocs.yml` file, pointing to the base URL of your documentation site. Example: `site_url: https://your-domain.com/your-docs/`
Add the `pymdownx.superfences` extension and its `custom_fences` configuration for Mermaid in your `mkdocs.yml` file under `markdown_extensions`. Example: `markdown_extensions: - pymdownx.superfences: custom_fences: - name: mermaid class: mermaid format: !!python/name:pymdownx.superfences.fence_code_format`
Instead of using the `exclude` configuration option, add the `pz-ignore` class directly to the image or diagram you wish to exclude in your Markdown. Example: `{.pz-ignore}`Carefully review and refine your `include_selectors` and `exclude_selectors` to prevent overlaps. Prefer using the `pz-ignore` class for specific item exclusions where possible, or adjust selectors to be mutually exclusive. If the bug persists, you may need to rely on more granular CSS targeting or report the issue to the plugin maintainer.