Skip to content

MkDocs Plugin to enable pan & zoom on images and mermaid/d2 diagrams

License

Notifications You must be signed in to change notification settings

LarsWegm/mkdocs-panzoom

 
 

Repository files navigation

Panzoom for MkDocs

This plugin makes use of the panzoom (LICENCE) library by Andrei Kashcha

Live Demo

Setup

pip install mkdocs-panzoom-plugin

Add it to your mkdocs.yml:

plugins:
  - search
  - panzoom

Warning

Make sure to define the site_url otherwise it won't work!

Example:

site_url: https://playg0n.github.io/mkdocs-panzoom/

Usage

Examples and usage are available in the docs.

Config

Selectors

Mermaid and D2 are included by default, but you can add any arbitrary selector or exclude the default ones. To enable images add the img tag like below.

plugins:
  - panzoom:
      include_selectors:
        - .myClass # class in html
        - "#myId" # id in html
        - "img" # tag in html
      exclude_selectors:
        - ".mermaid"
        - ".d2"

Exclude Pages

plugins:
  - panzoom:
      exclude:
        - Path/to/page.md

Enable Fullscreen

Warning

This is still in development!

plugins:
  - panzoom:
      full_screen: True # default False

Credits

The structure and some parts are from the enumerate-headings-plugin (LICENCE)

About

MkDocs Plugin to enable pan & zoom on images and mermaid/d2 diagrams

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Python 75.5%
  • JavaScript 17.8%
  • CSS 6.7%