Highlight Boxes

A highlight box is a titled panel inside a slide — a definition, a
warning, a worked example. If you've used Beamer, these are its block,
alertblock and exampleblock; if you've used a documentation theme, they're
its admonitions.

The ### signal

## starts a new slide. ### does not — it opens a box on the slide you
are already on:

## Continuity

A function is continuous when small changes in the input produce small
changes in the output.

### Definition
*f* is continuous at *a* when the limit of *f(x)* as *x* → *a* equals *f(a)*.

The box holds everything after the ### line until the next heading (###,
## or #), the next column break (---), or the end of the slide. Inside it
you can put anything: paragraphs, lists, images, code, math.

The text after ### becomes the title bar. Leave it empty and you get a box
with no bar — just the body, with a colored stripe down its left edge:

###
A quiet aside, with no title.

Variants

An optional modifier right after ### picks the style. The short form and the
full name are synonyms — use whichever reads better to you.

Modifier	Variant	Typical use
(none) · <s> · <standard>	Standard	Definitions, statements, neutral asides
<a> · <alert>	Alert	Warnings, common mistakes, "don't do this"
<e> · <example>	Example	Worked examples, illustrations

### Definition
The neutral one.

###<a> Careful
This is the mistake everyone makes.

###<e> Example
Applying it to a concrete case.

Naming your own variant

Any other word makes a custom variant. ###<theorem> Pythagoras renders a
box with the class callout-theorem, which you colour by defining one CSS
variable in your theme or frontmatter:

===
title: Geometry
--tac-callout-theorem: #7b4bd8
===

###<theorem> Pythagoras
In a right triangle, +[a^2 + b^2 = c^2].

Until you define --tac-callout-<name>, a custom variant falls back to the
standard colour — so a typo degrades gracefully instead of breaking the slide.

The three built-in variants take their colour from the same place, so a theme
can restyle them wholesale:

Variable	Default
--tac-callout-standard	#3b9ad9
--tac-callout-alert	var(--tac-accent)
--tac-callout-example	#2a8a82

Boxes and clicks

A box can hold reveals like any other content —
its body appears click by click while the box itself stays put:

###<e> Example
>[1]{First we substitute the values.}
>[2]{Then we simplify.}

Because a hidden reveal keeps its space by default, the box is drawn at its
final size from the start: it doesn't grow, and the boxes below it don't shift
down as you click.

You can also reveal a whole box — title bar included — by wrapping it in a
block-level reveal. Put the ### inside the braces:

## What the job actually looks like

>[1]{- You'll work in **teams**, not alone}
>[2]{- You'll touch **other people's code**, not just your own}
>[3]{- You'll have to **decide**, not just **write code**}
>[4]{
###<alert> The uncomfortable truth
Nobody hires you just because you know a language's syntax.
}

The box holds its place from the first click and fades in whole on click 4 —
the bullets above it never move.