markdown-preview
在 VuePress 站点中支持内容预览。
使用
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 可选标题
预览内容
:::
它将在站点中渲染为一个预览容器,同时显示内容和其源代码:
预览内容
可选标题
预览内容
有时,用户的代码可能与嵌入的预览内容不同,你可以直接使用 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;
}