Lattice

Components Code

compare-code

Comparison Split Structure

Two fenced code blocks side-by-side, each with a label.

Open in Playground
Variant

Use to contrast a before/after refactor, two API styles, or two configurations. Each side gets an h3 label and one fenced block.

snippetcontrasttradeoff

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

SlotSelectorRequiredDescription
title h2 yes Slide heading framing the comparison.
left section > h3:first-of-type + pre yes Left label (h3) and code block.
right section > h3:nth-of-type(2) + pre yes Right label (h3) and code block.

Anatomy

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

Variants

mirror — Mirror — swap left and right

Flips the left and right columns. Useful when the deck's visual rhythm wants the after-state on the left, or when the natural reading order is new-then-old.

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

`After & before · Component manifest loading`

## Folder-shape lookup, with the prior approach for reference.

`After · folder shape`

```js
function loadOne(name) {
  const p = path.join(
    __dirname, 'lib', 'components',
    name, 'manifest.json'
  );
  return JSON.parse(fs.readFileSync(p, 'utf8'));
}
```

`Before · flat file`

```js
function loadOne(name) {
  const p = path.join(
    __dirname, 'lib', 'components',
    `${name}.json`
  );
  return JSON.parse(fs.readFileSync(p, 'utf8'));
}
```

Related