图片描述 - Markdown 图片标题

效果图

安装 @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)
    } 
  } 
})

导入主题

全量导入

// theme/index.ts
import './types/index.js/style'

单独导入

// theme/index.ts
import './types/index.js/pic'

也可以单独添加样式

<<< @/../src/style/picture.css

使用示例

![效果图](/logo/logo-mini.svg)

![浅色模式](/logo/github.svg){.light-only}

![深色模式](/logo/github-dark.svg){.dark-only}

![深色模式](/logo/github-dark.svg#dark)

![浅色模式](/logo/github.svg#light)

效果图

浅色模式

深色模式

深色模式

浅色模式