VuePress 生态系统VuePress 生态系统
  • 主题指南
  • 默认主题
  • Hope 主题
  • Plume 主题
  • Reco 主题
  • 功能插件
  • Markdown 插件
  • 搜索插件
  • 博客插件
  • 渐进式应用插件
  • 统计分析插件
  • 搜索引擎优化插件
  • 开发插件
  • 工具插件
  • AI 插件
  • @vuepress/helper
  • English
  • 简体中文
GitHub
  • 主题指南
  • 默认主题
  • Hope 主题
  • Plume 主题
  • Reco 主题
  • 功能插件
  • Markdown 插件
  • 搜索插件
  • 博客插件
  • 渐进式应用插件
  • 统计分析插件
  • 搜索引擎优化插件
  • 开发插件
  • 工具插件
  • AI 插件
  • @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
    • 幻灯片演示
    • 幻灯片主题
  • shiki

markdown-preview

@vuepress/plugin-markdown-preview

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

使用

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 可选标题

预览内容

:::

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

预览内容

可选标题
预览内容

有时,用户的代码可能与嵌入的预览内容不同,你可以直接使用 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 变量自定义样式:

: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;
}
在 GitHub 上编辑此页
上次更新: 2025/6/4 16:12
贡献者: Mister-Hope
上一页
markdown-math
下一页
markdown-stylize