VuePress EcosystemVuePress Ecosystem
  • Theme Guidelines
  • theme-default
  • Hope Theme
  • Plume Theme
  • Reco Theme
  • Feature Plugins
  • Markdown Plugins
  • Search Plugins
  • Blog Plugins
  • PWA Plugins
  • Analytics Plugins
  • SEO Plugins
  • Development Plugins
  • Tool Plugins
  • AI Plugins
  • @vuepress/helper
  • English
  • 简体中文
GitHub
  • Theme Guidelines
  • theme-default
  • Hope Theme
  • Plume Theme
  • Reco Theme
  • Feature Plugins
  • Markdown Plugins
  • Search Plugins
  • Blog Plugins
  • PWA Plugins
  • Analytics Plugins
  • SEO Plugins
  • Development Plugins
  • Tool Plugins
  • AI Plugins
  • @vuepress/helper
  • English
  • 简体中文
GitHub
  • append-date
  • markdown-container
  • markdown-ext
  • markdown-image
  • markdown-include
  • markdown-hint
  • markdown-math
  • markdown-preview
  • markdown-stylize
  • markdown-tab
  • links-check
  • prismjs
  • revealjs
    • revealjs
    • Slide Demo
    • Reveal.js Themes
  • shiki

markdown-preview

@vuepress/plugin-markdown-preview

Support preview contents in VuePress site.

Usage

npm i -D @vuepress/plugin-markdown-preview@next
.vuepress/config.ts
import { markdownPreviewPlugin } from '@vuepress/plugin-markdown-preview'

export default {
  plugins: [markdownPreviewPlugin()],
}

Guide

The plugin provides a preview container and VPPreview component to preview contents in VuePress site.

You can use the preview container in markdown files like this:

::: preview Optional Title

Preview Contents

:::

It will be rendered as a preview container in the site, showing both the content and its raw code:

Preview Contents

Optional Title
Preview Contents

Sometimes, codes for users may be different with embedding preview contents, you can use the VPPreview component directly to achieve this:

<VPPreview title="Optional Title">
  <template #content>
    <!-- Your content here  -->

    Hello world!

  </template>
  <template #code>
    <!-- Your code here -->

```js
document.querySelector('body').innerText = 'Hello world!'
```

  </template>
</VPPreview>
Hello world!
Optional Title
document.querySelector('body').innerText = 'Hello world!'

Options

locales

  • Type: Record<string, MarkdownPreviewLocaleData>

    export interface MarkdownPreviewLocaleData {
      /**
       * Toggle code button text
       */
      toggle: string
    }
  • Details: Locales configuration for <VPPreview>.

Styles

You can customize the style via CSS variables:

:root {
  --preview-c-divider: var(--vp-c-divider);
  --preview-c-button: var(--vp-c-text-mute);
  --preview-c-button-hover: var(--vp-c-accent);
  --preview-c-button-focus: var(--vp-c-text);
  --preview-border-radius: 8px;
}
Edit this page on GitHub
Last Updated:: 6/4/25, 4:12 PM
Contributors: Mister-Hope
Prev
markdown-math
Next
markdown-stylize