Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vitepress support #184

Open
prashantnirgun opened this issue Feb 26, 2022 · 2 comments
Open

Vitepress support #184

prashantnirgun opened this issue Feb 26, 2022 · 2 comments

Comments

@prashantnirgun
Copy link

I started migrating from vuepress to vitepress then I realize I been using this zoom plugin. its been important for me. Is there any way out where I can use this plugin inside vitepress markdown file ?

If anyone knows any article or solution please share

@zam157
Copy link

zam157 commented Oct 26, 2022

Check this issue and comment, that might be help

@tobiasdalhof
Copy link

tobiasdalhof commented Dec 2, 2022

If you create your own vitepress theme, you can integrate medium-zoom as follows:

import type { Theme } from 'vitepress'
import { inBrowser, useRoute } from 'vitepress'
import mediumZoom from 'medium-zoom'
import { nextTick, watch } from 'vue'
import Layout from './Layout.vue'
import NotFound from './NotFound.vue'

export default <Theme>{
  Layout,
  NotFound,
  setup() {
    const route = useRoute()
    watch(
      () => route.path,
      () => nextTick(() => {
        if (inBrowser)
          mediumZoom('[data-zoomable]')
      }),
      { immediate: true },
    )
  },
}

Add data-zoomable data attribute in markdown:

![alt](src){data-zoomable}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants