https://github.com/playg0n/mkdocs-panzoom
MkDocs Plugin to enable pan & zoom on images and mermaid/d2 diagrams
https://github.com/playg0n/mkdocs-panzoom
d2 diagram mermaid mkdocs pan zoom
Last synced: about 1 month ago
JSON representation
MkDocs Plugin to enable pan & zoom on images and mermaid/d2 diagrams
- Host: GitHub
- URL: https://github.com/playg0n/mkdocs-panzoom
- Owner: PLAYG0N
- License: mit
- Created: 2024-08-21T18:53:29.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-03-26T17:25:59.000Z (about 2 months ago)
- Last Synced: 2025-03-26T18:30:42.371Z (about 2 months ago)
- Topics: d2, diagram, mermaid, mkdocs, pan, zoom
- Language: Python
- Homepage: https://playg0n.github.io/mkdocs-panzoom/
- Size: 7.03 MB
- Stars: 27
- Watchers: 3
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Panzoom for MkDocs
This plugin makes use of the [panzoom](https://github.com/anvaka/panzoom) ([LICENCE](./mkdocs_panzoom_plugin/panzoom/LICENCE)) library by [Andrei Kashcha](https://github.com/anvaka)
> [Live Demo](https://playg0n.github.io/mkdocs-panzoom/)
## Setup
`pip install mkdocs-panzoom-plugin`
Add it to your `mkdocs.yml`:
```yml
plugins:
- search
- panzoom
```
> [!WARNING]
>Make sure to define the `site_url` otherwise it won't work!
>
>**Example**:
>
>```yaml
>site_url: https://playg0n.github.io/mkdocs-panzoom/
>```
## Usage
Examples and usage are available in the [docs](https://playg0n.github.io/mkdocs-panzoom/).
## 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.
```yaml
plugins:
- panzoom:
include_selectors:
- .myClass # class in html
- "#myId" # id in html
- "img" # tag in html
exclude_selectors:
- ".mermaid"
- ".d2"
```
### Exclude Pages
```yml
plugins:
- panzoom:
exclude:
- Path/to/page.md
```
### Enable Fullscreen
> [!WARNING]
>This is still in development!
```yml
plugins:
- panzoom:
full_screen: True # default False
```
## Credits
The structure and some parts are from the [enumerate-headings-plugin](https://github.com/timvink/mkdocs-enumerate-headings-plugin) ([LICENCE](./licences/enumerate-headings-plugin))