markdown-preview

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

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

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

使用

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

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