compare-code

When to use

• Concrete code on both sides. Both sides hold short, readable snippets — refactor before/after, two API styles, two configurations. The diff is the point of the slide.
• Equal-length snippets. Snippets render side-by-side. Wildly different lengths break the visual balance — trim aggressively or split into two slides.
• Names the change. The h3 label on each side names what the reader is looking at (Before, After, v1, v2). Without labels the audience has to infer.

When not to use

• One side is prose. If one column is code and the other is description, use a single fenced block with surrounding prose. compare-code is for code-versus-code.
• Snippets longer than 14 lines. The text shrinks below readability past 14 lines per side. Split into two slides or extract the key delta into a smaller diff.
• Three-way comparison. compare-code is binary. For three configurations or three implementations, use prose with successive fenced blocks or a compare-table.

Authoring

<!-- _class: compare-code -->

## Heading framing the comparison.

### Before

```js
function before() {
  return 'old';
}
```

### After

```js
function after() {
  return 'new';
}
```

Slots

Anatomy

┌─────────────────────────────────────────┐
│  header                                 │
│  Code comparison heading.               │
│                                         │
│  ┌──────────────┐     ┌──────────────┐  │
│  │ // before    │     │ // after     │  │
│  │ foo();       │     │ bar();       │  │
│  │ baz();       │     │ qux();       │  │
│  └──────────────┘     └──────────────┘  │
│  footer                           1/19  │
└─────────────────────────────────────────┘

Related

• compare-prosethe change is state, not code
• compare-prosethe comparison is prose-versus-prose
• redlinethe change is in verbatim text or legal language
• compare-tablethree or more variants on shared dimensions