预览

预览

发表于 更新于
作者 廿四1 min 阅读

主题为你提供预览支持。

配置 ​

.vitepress/config.ts
ts
import { defineConfig } from 'vitepress-theme-niansi'

export default defineConfig({
  markdown: {
    plugins: {
      preview: true
    }
  }
})

使用 ​

你可以使用 preview 容器来显示一段内容及其源代码。

如果显示的代码于内容的源代码不同，你也可以使用 <Preview> 组件及其 code 和 content 插槽。

案例 ​

这里是一些内容。

可选标题
md
这里是一些内容。

你好，世界！

js
document.innerHTML = "你好，世界！";
Demo
md
::: preview 可选标题

这里是一些内容。

:::

<Preview>

<template #code>

```js
document.innerHTML = "你好，世界！";
```

</template>
<template #content>

你好，世界！

</template>

</Preview>

更新日志

2026-04-18 23:32
查看所有更新日志
Markdown预览
Markdown