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: 3 months 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 (5 months ago)
• Default Branch: main
• Last Pushed: 2024-10-16T17:34:05.000Z (3 months ago)
• Last Synced: 2024-11-01T07:03:20.731Z (3 months ago)
• Topics: d2, diagram, mermaid, mkdocs, pan, zoom
• Language: HTML
• Homepage: https://playg0n.github.io/mkdocs-panzoom/
• Size: 6.99 MB
• Stars: 16
• Watchers: 3
• Forks: 0
• Open Issues: 2
• 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))