Media

Updated Apr 28, 2026

Internal Images

Reference images from your docs directory:

![Example image](./images/example.jpg)

Renders as:

External Images

Reference images from external URLs:

![Placeholder](https://picsum.photos/seed/livemark/800/300)

Renders as:

Base64 Images

Embed small images directly using data URIs:

![banner](data:image/png;base64,iVBORw0KGgo...)

Renders as:

Themed Images

Show different images for light and dark mode using #light and #dark hash suffixes:

![Light theme](https://picsum.photos/seed/sunshine/800/200#light)
![Dark theme](https://picsum.photos/seed/dark/800/200#dark)

Renders as (toggle theme to see the switch):

The #light image is hidden in dark mode, and the #dark image is hidden in light mode. Use both together for seamless theme switching.

Image Zooming

All images in articles are zoomable — click any image to expand it to full size. This works with internal, external, and base64 images.

Video Blocks

Embed videos using the ::video directive with a type attribute:

::video{type="youtube" id="dQw4w9WgXcQ"}

Renders as:

Audio Blocks

Embed audio using the ::audio directive with a type attribute:

::audio{type="soundcloud" url="https://soundcloud.com/flume/never-be-like-you-feat-kai"}

Renders as: