Everything a post can contain

A living reference of every block this blog supports – callouts, formulas, diagrams, charts, maps, galleries, videos, embeds, downloads and cards.

This post is the cheat sheet I use when writing. Every block below is written in plain Markdown with a few shortcodes; the source file is src/content/blog/writing-guide_en.md.

Callouts

Click to expand

Hidden content for long tables or spoilers.

Formulas

Inline eiπ+1=0e^{i\pi} + 1 = 0 and display:

∫−∞∞e−x2 dx=π\int_{-\infty}^{\infty} e^{-x^2}\,dx = \sqrt{\pi}

Diagrams and charts

sequenceDiagram
  participant M as Markdown
  participant E as Eleventy
  participant B as Browser
  M->>E: build
  E->>B: static HTML
  B->>B: mermaid.render() only here

Code

const greet = (name) => `Hello, ${name}!`;
console.log(greet("world"));

Keyboard: press Ctrl + K.

Images, figures and galleries

A figure with a caption. Click to open it full screen.
A figure with a caption. Click to open it full screen.

Video, YouTube and embeds

A YouTube video (loads on click)
A YouTube video (loads on click)
Any iframe, in a responsive frame
Raw HTML works too

Cards

Lucide IconsBeautiful & consistent icons. Every icon on this site is from here. lucide.dev

A file to downloadDownload · GPX · 572 B

A button

Columns and tables

Left column text. Markdown works inside.

Right column text with a list:

  • one
  • two
Block Syntax
Callout ::: tip … :::
Formula $…$ and $$…$$
Diagram ```mermaid
Chart ```chart with JSON
Map {% map { … } %}
Gallery {% gallery "images/folder" %}