markdown-preview

约 438 字大约 1 分钟

2025-11-20

在 VuePress 站点中支持内容预览。

该插件未集成到默认主题中。（该项目已经加入此依赖）

可以在这里查看默认主题中支持的一些其他容器：markdown-hind

使用

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

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

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

指南

该插件提供了 preview 容器和 VPPreview 组件来在 VuePress 站点中预览内容。

你可以在 markdown 文件中像这样使用 preview 容器：

::: preview 可选标题

预览内容  <Badge type="tip" text="向阳而生🌅" vertical="top" />

```ts
class Mars{} // 预览代码
```

:::

它将在站点中渲染为一个预览容器，同时显示内容和其可的源代码：

预览内容向阳而生🌅

class Mars{} // 预览代码

可选标题

预览内容 <Badge type="tip" text="向阳而生🌅" vertical="top" />

```ts
class Mars{} // 预览代码
```

有时，用户的代码可能与嵌入的预览内容不同，你可以直接使用 VPPreview 组件来实现这一点：

<VPPreview title="可选标题">
  <template #content>
    <!-- 你的内容在这里 -->

    Hello world!

  </template>
  <template #code>
    <!-- 你的代码在这里 -->

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

  </template>
</VPPreview>

Hello world!

可选标题

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

选项

locales

类型：Record<string, MarkdownPreviewLocaleData>

export interface MarkdownPreviewLocaleData {
  /**
   * Toggle code button text
   *
   * 切换代码按钮文字
   */
  toggle: string
}

详情：<VPPreview> 的本地化配置。

样式

你可以通过 CSS 变量自定义样式：

@[code css](@vuepress/plugin-markdown-preview/src/client/styles/vars.css)

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