Mordoc

Bilder

Gestalten Sie die Inline-Abbildung und die zoombare Lightbox für Bilder, die in Markdown-Inhalten platziert werden.

1 MIN READ

Image umschließt ein Standard-Markdown-![]()-Bild mit einer Bildunterschrift und einer Klick-zum-Zoomen-Lightbox. Siehe Bilder für die Markdown-Syntax. Diese Seite behandelt sein Erscheinungsbild.

Die Override-Datei öffnen

Text
config/styles/image.css

Tokens

TokenWas es steuert
--image-radiusEckenradius, gemeinsam für die Inline-Abbildung und das Lightbox-Bild.
--image-caption-colorTextfarbe der Bildunterschrift unter der Inline-Abbildung. Standardmäßig --color-fg-muted.
--image-overlay-bgHintergrund hinter der Vollbild-Lightbox.
--image-close-button-radiusEckenradius des Schließen-Buttons der Lightbox.

Beispiel image.css

Eine config/styles/image.css, die jeden Token auf dieser Seite festlegt, für Hell- und Dunkelmodus:

Css
:root {
  --image-radius: 4px;
  --image-caption-color: #6b7280;
  --image-overlay-bg: rgba(0, 0, 0, 0.82);
  --image-close-button-radius: 6px;
}

.dark {
  --image-caption-color: #9ca3af;
}

Nächster Schritt

© 2026 MordocPowered by Mordoc