效果图

安装 @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 { fileURLToPath, URL } from 'node:url'
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' /* 图片样式 */

也可以单独添加样式到css/scss文件中

SCSS

/* markdown-it-image-figures style */

figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  figcaption {
    margin-top: 0.875rem;
    color: var(--vp-c-text-3);
    font-size: 0.875rem;
    font-weight: 400;

    a {
      color: var(--vp-c-text-3) !important;
    }
  }
}

CSS

/* markdown-it-image-figures style */

figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

figure figcaption {
  margin-top: 0.875rem;
  color: var(--vp-c-text-3);
  font-size: 0.875rem;
  font-weight: 400;
}

figure figcaption a {
  color: var(--vp-c-text-3) !important;
}

使用

![效果图](/TM-FELogo.png)

效果图