效果图

安装 @mdit/plugin-figure 插件

pnpm

pnpm add -D @mdit/plugin-figure

npm

npm install -D @mdit/plugin-figure

yarn

yarn add -D @mdit/plugin-figure

配置插件选项

.vitepress/config.mts

import { defineConfig } from 'vitepress'

import { figure } from '@mdit/plugin-figure'

export default defineConfig({
  markdown: { 
    config: (md) => { 
      md.use(figure, { figcaption: 'alt', copyAttrs: '^class$', lazy: true }) 
    } 
  } 
  ...
})

导入主题

所有主题

// theme/index.ts
import '@theojs/lumen/theme'

单独导入

// theme/index.ts
import '@theojs/lumen/pic'

也可以单独添加样式

使用

![效果图](/Logo.webp)

![浅色模式{.light-only}](https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ-w7jYJD-PBaozaH5WdubTPnBdi-XcQ4N96w&usqp=CAU)

![深色模式{.dark-only}](https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRCHxR2C_q8ugOMQzSmMovD3ni-z1QqTopSjg&usqp=CAU)

![深色模式](https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRCHxR2C_q8ugOMQzSmMovD3ni-z1QqTopSjg&usqp=CAU#dark)

![浅色模式](https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ-w7jYJD-PBaozaH5WdubTPnBdi-XcQ4N96w&usqp=CAU#light)

效果图

浅色模式

深色模式

深色模式

浅色模式