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 inline-code 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.

Common mistakes

• Using a markdown heading (### Before) for a column label instead of an inline-code paragraph. The transform splits columns on <p><code> boundaries only — a heading isn't recognized at all, so both fenced blocks collapse into one lopsided column instead of two. Label each side with a backtick-wrapped paragraph (` Before `), matching the sample.
• Omitting the second column's label. The split happens at each label boundary — a missing second label leaves the second fenced block trailing inside the first column instead of starting a new one. Every side needs its own inline-code label.

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
• redlinethe comparison is prose-versus-prose
• redlinethe change is in verbatim text or legal language
• compare-tablethree or more variants on shared dimensions