Images and embeds

How to use images and embeds in markdown.

Images

![Image](/prose-img/light.png)

Lifted Image

A lifted image is an image that has border and shadow, making it stand out more.

![Lifted Image](/prose-img/light.png){lifted}

Color Mode Image

A color mode image is an image that changes based on the current color mode (light or dark). This is useful for images that have different colors in light and dark mode.

::color-mode-image
---
srcLight: /prose-img/light.png
srcDark: /prose-img/dark.png
alt: Color Mode Image
---
::

Image Zooming

Images can be zoomed in by clicking on them. This feature is enabled by default. You can disable it by setting main.imageZoom to false in the app config or by setting the no-zoom prop to true on the image component.

No Zooming Image

![No Zooming Image](/prose-img/light.png){no-zoom}

Embeds

YouTube Video

:iframe{src="https://www.youtube.com/embed/KnCNOp5Pbfs?si=Sxc-b7345FzgunTd" class="rounded-md" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen style="aspect-ratio: 16/9;"}
Edit this page
Code Blocks
A showcase of code blocks variants.
Alert