markdown-preview

Support preview contents in VuePress site.

Usage

npm i -D @vuepress/plugin-markdown-preview@next

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

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!

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;
}