3. Formatting, callouts, and columns

The everyday blocks: inline patterns, admonition callouts, and side-by-side layout.

Before you start: A book site and its table of contents

Inline patterns light up automatically wherever prose renders: **bold**, _italic_ (underscores, not asterisks), backtick code, [text](page) links, :lucide.check: icons, and $x^2$ math. For a paragraph mixing styled segments, a text block holds spans, each with its own class.

A callout is an admonition with an icon and a coloured heading — six built-in classes: note, info, tip, warning, error, success. A column block lays its children side by side; widths gives one CSS percentage per child, summing to about 100.

§ 1Exercise: A formatted page

Add a page using at least three inline patterns, two differently-classed callouts, and a two-column layout.

page style_tour { sites = [:docs]
  h1 "Style tour"
  p "Mix **bold**, _italic_, `code`, and an icon :lucide.check: in one line."
  callout "Tip"     { class = ["tip"]      body = "A helpful shortcut or best practice." }
  callout "Warning" { class = ["warning"]  body = "Something to be careful about." }
  column {
    widths = [50.0, 50.0]
    p "**Left.** The first child fills the first slot."
    p "**Right.** The second child fills the other half."
  }
}