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