Shortcodes Demos

June 13, 2025

Abstract

radion comes with some handy shortcodes to make your life easier and your posts more exciting.

Here are some examples:

GIF-Suport

Level up your posts with GIFs!

{{ gif(sources=["path/to/file"], width=[1-100], caption=[""]) }}

Fancy Notes

{{ note(body="...", header=["" | "Note"], center=[true/false | false]) }}

Note

Some really insightful note here.

$$ \sum_{i=1}^{n} i = \frac{n(n+1)}{2} $$

YouTube Video Embedding

{{ youtube(id="youtube-id", width=[1-100], [playlist="playlist id"]) }}

Standalone video:

{{ youtube(id="ym3y13nA3ew", width=80) }}

Video from a playlist:

{{ youtube(id="LnzuMJLZRdU", width=80, playlist="PLowKtXNTBypFbtuVMUVXNR0z1mu7dp7eH") }}

Audio File Embedding

{{ audio(source="path/to/file") }}

If you're still falling for this, I don't know what to tell you.

Responsive Images

{{ responsive(src="path/to/image", caption="Optional caption", width=[1-100], align=["left"|"right"|"center"]) }}
Picture of Rust mascot Ferris

Everyone say 'Hi Ferris' in the comments

Parameters:

  • src: Path to the image (required)
  • alt: Alt text for the image (optional)
  • caption: Caption text below the image (optional)
  • width: Image width as percentage of container, 1-100 (optional, default: 100)
  • align: Alignment - "left", "right", or "center" (optional, default: center)
  • height: Maximum height in pixels (optional)

Example with custom width and alignment:

{{ responsive(src="assets/ferris.png", alt="Ferris aligned left", caption="Left-aligned image at 60% width", width=60, align="left") }}
Ferris aligned left

Left-aligned image at 60% width